一、 node安裝

? 1）如果不確定自己是否安裝了node,可以在命令行工具內執(zhí)行： node -v ?（檢查一下 版本）；

? 2）如果 執(zhí)行結果顯示： xx 不是內部命令，說明你還沒有安裝node , node 安裝地址：http://nodejs.cn/download/

注 ：安裝 vue-cli 腳手架目前需要node版本為 v4.0 以上；

?

二、 vue-cli 全局安裝

?命令行執(zhí)行 : npm install -g vue-cli ???// 加-g是安裝到全局

安裝完成以后?可以輸入命令?：vue 回車，可以看到針對vue的命令行；

?

三、初始化項目

執(zhí)行命令： vue init webpack demo(你新建的項目名稱/文件名稱)

執(zhí)行之后將會 自動初始化一個文件夾 ：demo

手動打開demo文件夾 可以看到 已經初始化好了 一個基本的項目：

?

四、啟動項目

npm run dev 啟動項目

繼續(xù)執(zhí)行： cd demo (這是進入到demo文件夾的命令)

?然后執(zhí)行 安裝 ：npm install

注： npm install 執(zhí)行可以進行vue已經vue的插件安裝，在第三步的時候，已經初始化了項目，并且在 package.json 里面已經有相關配置，所以在這里可以直接安裝；

?安裝完成之后再執(zhí)行命令： npm run dev?

整個項目就已經啟動了：

?

?

五、項目文件配置介紹

build 和 config ?是關于webpack的配置，里面包括一些server,和端口；

node_modules: 安裝依賴代碼庫；

src : ?存放源碼；

static：存放第三方靜態(tài)資源的，static里面的.gitkeep，如果為空，也可以提交到gitHub上面，正常情況下，是不可以提交的。

?.babelrc:把es6文件編譯成es5

.babelrc文件{"presets": ["es2015", "stage-2"],//表示預設，表示babelrc轉換預先需要安裝的插件"plugins": ["transform-runtime"],//把es6的方法做轉換"comments": false //false表示轉換后代碼不生成注釋 }

.editorconfig：編輯器的配置 .editorconfigcharset = utf-8 //編碼 indent_style = space //縮進風格,基于空格做縮進 indent_size = 2 //縮進大小是2格 end_of_line = lf //換行符的風格 insert_final_newline = true //當你創(chuàng)建一個文件，會自動在文件末尾插入新行 trim_trailing_whitespace = true //自動移除行尾多余空格

?

.eslintignore 忽略語法檢查的目錄文件

就是忽略對build/*.js和 config/*.js

package.json :??

?

{"name": "demo","version": "1.0.0","description": "demoApp","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 ? ?和 main.js

轉載于:https://www.cnblogs.com/yearshar/p/11412971.html

總結

以上是默认站点為你收集整理的vue - cli 脚手架安装的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得默认站点網站內容還不錯，歡迎將默认站点推薦給好友。