1.先安裝node,檢查node版本,node -v,安裝vue-cli腳手架,node的版本必須在v4.0以上
2.全局安裝vue-cli,npm install -g vue-cli,檢vue是否安裝成功,vue,用vue list可以查看vue有哪些可以安裝的模板
z
3.安裝一個webpack的模板,vue init webpack sell
如果一直是downloading狀態(tài),可以嘗試這個。
全局安裝 vue-cli:npm install --global vue-cli,然后創(chuàng)建一個基于 webpack 模板的新項目:vue init webpack sell就ok了
4.安裝成功。以下就是vue+webpack的模板
5.執(zhí)行npm install,安裝依賴模塊,如果速度很慢,可以以下方法解決
(1)使用阿里巴巴在國內(nèi)的鏡像服務(wù)器,命令如下:
npm install -gd express --registry=http://registry.npm.taobao.org
(2)只需要使用–registry參數(shù)指定鏡像服務(wù)器地址,為了避免每次安裝都需要--registry
參數(shù),可以使用如下命令進(jìn)行永久設(shè)置:(推薦)
npm config set registry http://registry.npm.taobao.org
再次list一下,會發(fā)現(xiàn)已經(jīng)在了,重新使用npm install命令
6.執(zhí)行npm run dev運行模板,建議更改下端口號,config----index.js,里面的port端口改為和其他端口不一樣就可以了。
如果出現(xiàn)執(zhí)行npm install,npm run dev
執(zhí)行成功的界面
*************************************項目文件的解讀***************************************
bulid和config是 webpck配置相關(guān)
node_modules文件夾:是npm install安裝的依賴代碼庫
src文件夾:存放源碼
static:存放第三方靜態(tài)資源的,static里面的.gitkeep,如果為空,也可以提交到gitHub上面,正常情況下,是不可以提交的。
.babelrc:把es6文件編譯成es5
.babelrc文件{ "presets": ["es2015", "stage-2"],//表示預(yù)設(shè),表示babelrc轉(zhuǎn)換預(yù)先需要安裝的插件 "plugins": ["transform-runtime"],//把es6的方法做轉(zhuǎn)換 "comments": false //false表示轉(zhuǎn)換后代碼不生成注釋}
.editorconfig:編輯器的配置
.editorconfigcharset = utf-8 //編碼indent_style = space //縮進(jìn)風(fēng)格,基于空格做縮進(jìn)indent_size = 2 //縮進(jìn)大小是2格end_of_line = lf //換行符的風(fēng)格insert_final_newline = true //當(dāng)你創(chuàng)建一個文件,會自動在文件末尾插入新行trim_trailing_whitespace = true //自動移除行尾多余空格
.eslintignore 忽略語法檢查的目錄文件
就是忽略對build/*.js和config/*.js的語法檢查
.eslintrc.js eslint的配置文件
package.json對項目的描述
{ "name": "sell", "version": "1.0.0", "description": "sell app", "author": "", "private": true, "scripts": { /*表示可以執(zhí)行一些命令,例如:npm run dev會執(zhí)行node build/dev-server.js,npm run build會執(zhí)行node build/build.js,因此可以通過scripts配置腳本*/ "dev": "node build/dev-server.js", "build": "node build/build.js", "lint": "eslint --ext .js,.vue src" }, "dependencies": { /*項目的依賴*/ "vue": "^2.2.2", "vue-router": "^2.2.0" }, "devDependencies": { //編譯需要的依賴 ....................... }, "engines": { "node": ">= 4.0.0", "npm": ">= 3.0.0" }, "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]}
index.html是項目的入口,入口js是main.js
聯(lián)系客服