Vue2.0 搭建腳手架
概念
Vue-cli 是 Vue 官方提供的用于初始化 Vue 項目的腳手架工具。使用 Vue-cli 有以下幾大優勢
1、Vue-cli 是一套成熟的 vue 項目架構設計，會跟著 Vue 版本的更迭而更新
2、Vue-cli 提供了一套本地的熱加載的測試服務器
3、Vue-cli 集成了一套打包上線的方案，可使用 webpack 或 Browserify 等構建工具
# 查看node版本
node -v
# 查看npm 版本
npm -v
# 更新node.js版本
#1.清除npm緩存
npm cache clean -f
#2.安裝n模塊，n模塊是專門用來管理nodejs版本 --force或-f:強制重新安裝
npm install -g n -f
#3.升級node.js到最新穩定版
n stable
#查看node安裝路徑
which node
#直接升級最新版本
npm install npm @latest -g
# windows 版本直接重裝吧！
#安裝cnpm 使用國內淘寶源
npm install -g cnpm --registry=https://registry.npm.taobao.org
# nvm 管理包版本
#全局安裝 webpack
npm install webpack -g
# 安裝完成后輸入 webpack -v，出現對應版本號則安裝成功。
npm install webpack-cli -g
# Vue 安裝
# 最新穩定版
$ npm install vue
#安裝vue-cli腳手架構建工具 2.9.6
cnpm install --global vue-cli
# 查看版本
vue -V
# 創建一個基于 webpack 模板的新項目 taopiaopiao
vue init webpack taopiaopiao
Project name (taopiaopiao) # 項目名稱（我的項目）
Project description (A Vue.js project) # 項目描述一個Vue.js 項目
Author 作者（你的名字）
Install vue-router? (Y/n) # 是否安裝Vue路由，也就是以后是spa（但頁面應用需要的模塊）
Use ESLint to lint your code? (Y/n) # 使用 ESLint 到你的代碼？ （Y [ yes ] / N [ no ]）
Pick an ESLint preset (Use arrow keys) # 選擇一個預置ESLint（使用箭頭鍵）
Setup unit tests with Karma + Mocha? (Y/n) # 設置單元測Karma + Mocha？ （Y/ N）
Setup e2e tests with Nightwatch? (Y/n) # 設置端到端測試，Nightwatch？ （Y/ N）
#安裝項目所需要的依賴
cnpm i
#運行項目
cd tiaopiaopiao
npm run dev
# Vue CLI 3.0 搭建
# 1.如果你Vue2.9.6未安裝跳過此步驟，已經安裝了vue 2.9.6 的話，則需要先將其刪除：指令為：
npm uninstall -g vue-cli
# 提示：Vue CLI要求Node.js版本8或者更高（8.10.0+ 推薦）。
# 更新Vue-cli 指令：(` cnpm install -g @vue/cli ` 使用國內的淘寶鏡像cnpm 安裝速度快)
npm install -g @vue/cli 或 cnpm install -g @vue/cli 或 yarn global add @vue/cli
# 構建項目 3.0 預設 presets 2.0 是要選擇模板；指令：
vue create maoyan
# 默認配置
# 選擇 [默認] 將直接開始安裝
# 自定義配置
# 選擇 [自定義]
# 方向鍵上下移動，空格選中，Enter確定，自定義配置中，您將會看到這些配置項
# 自定義細節配置
# 1.是否使用class風格的組件語法
# 2.是否使用babel做轉義
# 3.選擇CSS預處理類型
# 4.選擇語法檢測規范
# 5.選擇 保存時檢查 / 提交時檢查
# 6.選擇配置信息存放位置，單獨存放或者并入package.json
# 7.是否保存當前預設，下次構建無需再次配置
兩個版本的差異
public相當于原來的static，里面的index.html是項目的入口
src同以前一樣
Vue-Cli3.0沒有build和config了， 想要配置的話，需要在項目根目錄下創建vue.config.js文件
使用 vue.config.js 文件（位置是項目的根目錄，不是src目錄）
module.exports = {
// 基本路徑
baseUrl: '/',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置項
// https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生產環境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預設器配置項
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
// use thread-loader for babel & TS in production build
// enabled by default if the machine has more than 1 cores
parallel: require('os').cpus().length > 1,
// 是否啟用dll
// See https://github.com/vuejs/vue-cli/blob/dev/docs/cli-service.md#dll-mode
dll: false,
// PWA 插件相關配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
proxy: null, // 設置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
npm run serve ——運行指令
npm run lint ——語法檢測&自行修復
