記錄vue項(xiàng)目使用腳手架和不使用腳手架
1、vue-cli
①webpack 4.X 開(kāi)始，需要安裝 webpack-cli 依賴(lài) ,所以使用這條命令 ?npm install webpack webpack-cli -g
②npm install --global vue-cli
③vue init webpack icey(項(xiàng)目名)
④輸入一些項(xiàng)目信息
Project name ()： -----項(xiàng)目名稱(chēng)，直接回車(chē)，按照括號(hào)中默認(rèn)名字（注意這里的名字不能有大寫(xiě)字母，如果有會(huì)報(bào)錯(cuò)Sorry, name can no longer contain capital letters），阮一峰老師博客為什么文件名要小寫(xiě)，可以參考一下。
Project description (A Vue.js project)： ----項(xiàng)目描述，也可直接點(diǎn)擊回車(chē)，使用默認(rèn)名字
Author ()： ---輸入名字
接下來(lái)會(huì)讓用戶(hù)選擇：
Runtime + Compiler: recommended for most users 運(yùn)行加編譯，既然已經(jīng)說(shuō)了推薦，就選它了
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere 僅運(yùn)行時(shí)，已經(jīng)有推薦了就選擇第一個(gè)了
Install vue-router? (Y/n) 是否安裝vue-router，這是官方的路由，大多數(shù)情況下都使用，這里就輸入“y”后回車(chē)即可。
Use ESLint to lint your code? (Y/n) 是否使用ESLint管理代碼，ESLint是個(gè)代碼風(fēng)格管理工具，是用來(lái)統(tǒng)一代碼風(fēng)格的，一般項(xiàng)目中都會(huì)使用。
接下來(lái)也是選擇題Pick an ESLint preset (Use arrow keys) 選擇一個(gè)ESLint預(yù)設(shè)，編寫(xiě)vue項(xiàng)目時(shí)的代碼風(fēng)格，直接y回車(chē)
Setup unit tests with Karma + Mocha? (Y/n) 是否安裝單元測(cè)試，我選擇安裝y回車(chē)
Setup e2e tests with Nightwatch(Y/n)? 是否安裝e2e測(cè)試 ，我選擇安裝y回車(chē)
⑤npm i 安裝依賴(lài)
⑥npm install -g cnpm --registry=https://registry.npm.taobao.org安裝依賴(lài)的時(shí)候可能比較慢，安裝淘寶鏡像
⑦npm run dev啟動(dòng)項(xiàng)目
2、不使用腳手架構(gòu)建項(xiàng)目
①建立webpack配置文件webpack.config.js
// 由于 webpack 是基于Node進(jìn)行構(gòu)建的，所有，webpack的配置文件中，任何合法的Node代碼都是支持的
var path = require('path')
// 在內(nèi)存中，根據(jù)指定的模板頁(yè)面，生成一份內(nèi)存中的首頁(yè)，同時(shí)自動(dòng)把打包好的bundle注入到頁(yè)面底部
// 如果要配置插件，需要在導(dǎo)出的對(duì)象中，掛載一個(gè) plugins 節(jié)點(diǎn)
var htmlWebpackPlugin = require('html-webpack-plugin')
var webpack=require('webpack');
favicon: path.resolve('favicon.ico')
// 當(dāng)以命令行形式運(yùn)行 webpack 或 webpack-dev-server 的時(shí)候，工具會(huì)發(fā)現(xiàn)，我們并沒(méi)有提供 要打包 的文件的 入口 和 出口文件，此時(shí)，他會(huì)檢查項(xiàng)目根目錄中的配置文件，并讀取這個(gè)文件，就拿到了導(dǎo)出的這個(gè) 配置對(duì)象，然后根據(jù)這個(gè)對(duì)象，進(jìn)行打包構(gòu)建
module.exports = {
? entry: path.join(__dirname, './src/main.js'), // 入口文件
? output: { // 指定輸出選項(xiàng)
? ? path: path.join(__dirname, './dist'), // 輸出路徑
? ? filename: 'bundle.js' // 指定輸出文件的名稱(chēng)
? },
? plugins: [ // 所有webpack? 插件的配置節(jié)點(diǎn)
? ? new htmlWebpackPlugin({
? ? ? template: path.join(__dirname, './src/index.html'), // 指定模板文件路徑
? ? ? filename: 'index.html' // 設(shè)置生成的內(nèi)存頁(yè)面的名稱(chēng)
? ? }),
? ? new webpack.ProvidePlugin({
? ? ? jQuery: 'jquery',
? ? ? $: 'jquery'
? })
? ],
? module: { // 配置所有第三方loader 模塊的
? ? rules: [ // 第三方模塊的匹配規(guī)則
? ? ? { test: /\.css$/, use: ['style-loader', 'css-loader'] }, // 處理 CSS 文件的 loader
? ? ? { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }, // 處理 less 文件的 loader
? ? ? { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }, // 處理 scss 文件的 loader
? ? ? { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 處理 圖片路徑的 loader
? ? ? // limit 給定的值，是圖片的大小，單位是 byte， 如果我們引用的 圖片，大于或等于給定的 limit值，則不會(huì)被轉(zhuǎn)為base64格式的字符串， 如果 圖片小于給定的 limit 值，則會(huì)被轉(zhuǎn)為 base64的字符串
? ? ? { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 處理 字體文件的 loader
? ? ? { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 來(lái)轉(zhuǎn)換高級(jí)的ES語(yǔ)法
? ? ? { test: /\.vue$/, use: 'vue-loader' } // 處理 .vue 文件的 loader
? ? ]
? },
? resolve: {
? ? alias: { // 修改 Vue 被導(dǎo)入時(shí)候的包的路徑
? ? ? // "vue$": "vue/dist/vue.js"
? ? ? 'bootstrap': './node_modules/bootstrap'
? ? }
? }
}
②npm init 配置項(xiàng)目信息，生成package.json和package-lock.json文件
③npm i 安裝依賴(lài)
