vue-cli 是vue.js的腳手架,用於自動生成vue.js模板工程的。 安裝vue-cli之前,需要先安裝了vue和webpack · node -v //(版本低引起:bash: npm: command not found) · npm -v //以上幫助檢查是否安裝 node npm · ...
vue-cli 是vue.js的腳手架,用於自動生成vue.js模板工程的。 安裝vue-cli之前,需要先安裝了vue和webpack
· node -v //(版本低引起:bash: npm: command not found)
· npm -v
//以上幫助檢查是否安裝 node npm
· 輸入vue //測試vue是否安裝成功
· 輸入vue list //看vue中有哪些子類 npm install vue
· npm
install
-g vue-cli
//
全局安裝vue-cli
·
vue init webpack projectName
//
生成項目名為projectName的模板,這裡的項目名projectName隨你自己寫 (是的話 敲回車就行)
//
預設情況下,webpack安裝的是最新版本的,如果要安裝其他版本,使用命令行vue init webpack
#1.0 ***就可以了。
在安裝時會詢問你:
①、Project name (sanfeng1);項目名稱(sanfeng1)。(確定按enter,否按N)
②、 Project description (A Vue.js project);項目描述(一vue.js項目)。(隨意輸入一段簡短介紹,用英文)
③、Author (sunsanfeng);作者(sunsanfeng)。(確定按enter,否按N)
④、Vue build (Use arrow keys)> Runtime + Compiler: recommended for most usersRuntime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere;Vue公司的建立(使用箭頭鍵)>運行時+編譯器:大多數用戶推薦運行時間:約6kb輕民+ gzip,但模板(或任何Vue具體HTML)只允許在。VUE文件渲染功能是必需的其他地方。(按enter)
⑤、Install vue-router? (Y/n);安裝的路由?(/ N)。(可安可不安,以後也可以再安,根據需求選擇)
⑥、Use ESLint to lint your code? (Y/n);使用ESlint語法?(Y/ N)。(使用ESLint語法,就要做好心理準備,除非你非常懂ESLint語法,要不就會處處報錯,我就被逼瘋過,建議N)
⑦、Setup unit tests with Karma + Mocha? (Y/n);設置單元測試?(Y / N)。(選N)
⑧、Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的測試?(Y / N)。(選N)
此時會生成一個 projectName 的文件夾,這個文件夾就是vue的項目模板
· cd
projectName
//
進入文件目錄
· npm
install
//
初始化安裝依賴
· npm run dev
//運行,
在瀏覽器打開http:
//localhost
:8080,則可以看到歡迎頁了。
但是這個只能在本地跑,要如何在我們自己的伺服器上訪問呢?
· npm run build
會生成靜態文件,在根目錄的dist里,裡面有個index.html,這是伺服器訪問的路徑指定到這裡就可以訪問我們自己的項目了。
模板預設是run build 命令,如果提示沒有找到命令就需要去配置文件里尋找build指令
有時候生成的index.html里引用的css和js的引用路徑不對,這時候就需要自己修改一下。 例如改為:config/index.js
tips:
1、如何更新npm至最新版本?
npm install npm @latest -g //可以更新npm至最新版本
其中 @ 符號後面可以添加你想更新到的版本號。
2、安裝淘寶npm
$ npm
install
-g cnpm –registry=https:
//registry
.npm.taobao.org
//or
# 建議不要用cnpm 安裝有各種詭異的bug 可以通過如下操作解決npm速度慢的問題
$ npm
install
–registry=https:
//registry
.npm.taobao.org
3、要使用 <style lang="sass">
請安裝組件
$ npm install sass-loader node-sass vue-style-loader --D