快捷導(dǎo)航

詳解vue-cli 腳手架安裝

更新時(shí)間：2019年04月16日 14:45:28 作者：雅昕

這篇文章主要介紹了vue-cli腳手架安裝，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、 node安裝

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

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

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

二、 vue-cli 全局安裝

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

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

**:如果npm在國內(nèi)的網(wǎng)絡(luò)環(huán)境下可能會(huì)比較慢，解決方案：

使用淘寶鏡像:

1>.官方網(wǎng)址：http://npm.taobao.org；

2>.安裝：npm install cnpm -g --registry=https://registry.npm.taobao.org；注意：安裝完后最好查看其版本號(hào)cnpm -v或關(guān)閉命令提示符重新打開，安裝完直接使用有可能會(huì)出現(xiàn)錯(cuò)誤；

3>.注：cnpm跟npm用法完全一致，只是在執(zhí)行命令時(shí)將npm改為cnpm（以下操作將以cnpm代替npm）。

4> 如何更新npm的方法：可以使用 npm install -g npm 來更新版本

三、初始化項(xiàng)目

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

執(zhí)行之后將會(huì) 自動(dòng)初始化一個(gè)文件夾：demo

手動(dòng)打開demo文件夾可以看到已經(jīng)初始化好了一個(gè)基本的項(xiàng)目：

四、啟動(dòng)項(xiàng)目

如上圖所示，執(zhí)行初始化項(xiàng)目以后，下面會(huì)有對(duì)應(yīng)的命令：

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

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

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

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

整個(gè)項(xiàng)目就已經(jīng)啟動(dòng)了：

五、項(xiàng)目文件配置介紹

build 和 config 是關(guān)于webpack的配置，里面包括一些server,和端口；

node_modules: 安裝依賴代碼庫；

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：編輯器的配置

.editorconfig

charset = 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)建一個(gè)文件，會(huì)自動(dòng)在文件末尾插入新行
trim_trailing_whitespace = true //自動(dòng)移除行尾多余空格

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

就是忽略對(duì)build/*.js和 config/*.js

package.json :

{
 "name": "demo",
 "version": "1.0.0",
 "description": "demoApp",
 "author": "",
 "private": true,
 "scripts": { /*表示可以執(zhí)行一些命令，例如：npm run dev會(huì)執(zhí)行node build/dev-server.js，npm run build會(huì)執(zhí)行node build/build.js，因此可以通過scripts配置腳本*/
  "dev": "node build/dev-server.js",
  "build": "node build/build.js",
  "lint": "eslint --ext .js,.vue src"
 },
 "dependencies": { /*項(xiàng)目的依賴*/
  "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

以上所述是小編給大家介紹的vue-cli腳手架安裝詳解整合，希望對(duì)大家有所幫助，如果大家有任何疑問請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！

您可能感興趣的文章: