在Ubuntu下部署Vue開發環境(詳細流程)
阿新 • • 發佈:2018-12-26
在Ubuntu下部署Vue環境(非常詳細流程)
我們的需求是使用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 < [email protected]>
? 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
如有問題,請留言。
如有不足,請指正。