在Ubuntu下部署Vue開發環境(詳細流程)


在Ubuntu下部署Vue環境(非常詳細流程)

本文作者:魏泯

博客源地址:https://www.cnblogs.com/simple/

效率魔法師

我們的需求是使用vue進行前后端分離開發,本節目標是為了能夠使用npm run dev將我們的前端項目運行起來
我們需要的是nodejs、npm、cnpm、webpack、vue

我的Ubuntu版本: elementoryOS 5 (基於Ubuntu18)

在Ubuntu下下載安裝nodejs

更新包管理器apt與apt-get

sudo apt update
sudo apt-get update

使用apt包管理器進行下載

sudo apt-get install nodejs			# 下載nodejs
sudo apt-get install npm		#下載npm,它是nodejs的包管理器(nodejs package manager)

升級 npm

npm install npm -g
# npm install -g npm
# npm -g install npm

國內的npm不是很好用,使用cnpm代替npm的日常使用。

升級或安裝 cnpm

npm install cnpm -g

你可以使用以下命令來查看所有全局安裝的模塊:

$ npm list -g

請先安裝git,安裝命令請參考下面
ubuntu系統

sudo apt-get install git

安裝Vue

最新穩定版

$ cnpm install vue

命令行工具

Vue.js 提供一個官方命令行工具,可用於快速搭建大型單頁應用。

全局安裝 vue-cli

$ cnpm install --global vue-cli

使用 cnpm 安裝 webpack:

cnpm install webpack -g

創建一個基於 webpack 模板的新項目

$ vue init webpack my-project

這里需要進行一些配置,默認回車即可

This will install Vue 2.x version of the template.

For Vue 1.x use: vue init webpack#1.0 my-project

? Project name my-project
? Project description A Vue.js project
? Author runoob <test@runoob.com>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes

   vue-cli · Generated "my-project".

   To get started:
   
     cd my-project
     npm install
     npm run dev
   
   Documentation can be found at https://vuejs-templates.github.io/webpack

進入項目,安裝並運行:

$ cd my-project
$ cnpm install		# 安裝依賴
$ cnpm run dev		# 運行項目


 DONE  Compiled successfully in 4388ms

> Listening at http://localhost:8080

如有問題,請留言。
如有不足,請指正。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM