vue 官方文檔
vue-cli 官方文檔
vue 參考文章
vue 完整項目地址
一、用vue-cli腳手架快速創(chuàng)建一個vue項目
1抱婉、概念簡介
vue-cli 簡單來說就是一個快速構(gòu)建vue項目的腳手架工具，大大降低了webpack的使用難度桌粉，支持熱更新蒸绩，有webpack-dev-server的支持，相當(dāng)于搭了個測試環(huán)境铃肯，將重心放在了開發(fā)上患亿，而不必花大量精力去糾結(jié)配置的問題。
2押逼、安裝vue-cli
在新版本中步藕，vue-cli的包名稱由 vue-cli改成了@vue/cli。 如果你已經(jīng)全局安裝了舊版本的 vue-cli (1.x 或 2.x)挑格，你需要先通過npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸載它咙冗。
可以使用下列任一命令在cmd中安裝這個新的包：
npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝完成之后輸入 vue -V（注意這里是大寫的“V”）或者vue --version來檢測目前的版本。
之后
我們也可以在cmd（命令提示符）中輸入vue ui圖形化界面來創(chuàng)建和管理項目
3漂彤、創(chuàng)建新項目
vue create 項目名
（1）默認型
· 在輸出上面命令時雾消，會讓你選擇默認（default）還是手動（Manually）
· 先是默認的，一路回車后的項目目錄如下：
（2）手動型
· 按一下 ↓ 鍵選擇 Manually 手動型
·選擇自己常用的格式挫望，按 空格鍵 是選擇單個立润，a 鍵 是全選。
· vue-router 默認 hash 模式士骤，如果選擇yes會使用history模式
· 下一步詢問你安裝哪一種 CSS 預(yù)處理語言
· 這個是問你選擇哪個自動化代碼格式化檢測范删，
· 第一個是保存就檢測，第二個是 fix 和 commit 的時候檢查拷肌。
· 選擇單元測試解決方案到旦，Mocha是流行的JavaScript測試框架之一旨巷，通過它添加和運行測試，從而保證代碼質(zhì)量添忘，chai 是斷言庫采呐，我兩個都選擇了。
· 下邊問：babel, postcss, eslint 這些配置文件放哪搁骑？
第一個是：放獨立文件放置
第二個是：放package.json里
· 下邊意思是是否把以上配置保存為未來項目的預(yù)配置（就是下次創(chuàng)建項目時斧吐，可以選擇剛剛配置好的配置，不用再重復(fù)一遍）仲器，最后是預(yù)配置的名字煤率。
· 在創(chuàng)建項目時就會出現(xiàn)你配置好的名字
4、啟動新項目
７健蝶糯！注意啟動項目不能在有中文的目錄下
// 1. 進入項目
cd 項目名
// 2. 安裝項目依賴
npm install
// 3. 啟動
npm run serve
· cmd中出現(xiàn)下列內(nèi)容表示啟動成功
· 在瀏覽器中請求 http://localhost:8080/
· 文件目錄
這樣一個用vue-cli腳手架創(chuàng)建的項目就創(chuàng)建成功了
·有人可能會奇怪npm run build命令是干啥的
簡單來說，
npm run build就是一個打包命令辆沦，將復(fù)雜的vue項目打包成一個簡單的dist靜態(tài)資源文件夾昼捍，文件夾中的index.html是入口文件，想要把咱的項目放到服務(wù)器上給其他人看肢扯，當(dāng)然把整個vue項目放上去用pm2運行也可以妒茬，最好的辦法是打包放到服務(wù)器上去，用nginx去配置它蔚晨。
5乍钻、vue-cli 2.X 與vue-cli 3.0以上創(chuàng)建的版本的區(qū)別
（1）相比 vue-cli 2.X 創(chuàng)建的目錄，vue-cli 3.0 創(chuàng)建的目錄看不見 webpack 的配置
（2）啟動命令行由：
npm run dev 或者 npm start
改變?yōu)?br>
npm run serve
（3）安裝過程也發(fā)生了一些變化铭腕，配置可以保存团赁，下次可以再用
（4）手動配置 webpack：在根目錄下新建一個 vue.config.js 文件，進行你的配置 :
const path = require('path');
module.exports = {
// 基本路徑
baseUrl: './',
// 輸出文件目錄
outputDir: 'dist',
// eslint-loader 是否在保存的時候檢查
lintOnSave: true,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: (config) => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
config.mode = 'production';
} else {
// 為開發(fā)環(huán)境修改配置...
config.mode = 'development';
}
Object.assign(config, {
// 開發(fā)生產(chǎn)共同配置
resolve: {
alias: {
'@': path.resolve(__dirname, './src'),
'@c': path.resolve(__dirname, './src/components')
}
}
});
},
// 生產(chǎn)環(huán)境是否生成 sourceMap 文件
productionSourceMap: true,
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項
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,
// PWA 插件相關(guān)配置
// see https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
pwa: {},
// webpack-dev-server 相關(guān)配置
devServer: {
open: process.platform === 'darwin',
host: '0.0.0.0',
port: 8080,
https: false,
hotOnly: false,
// proxy: {
// // 設(shè)置代理
// // proxy all requests starting with /api to jsonplaceholder
// 'http://localhost:8080/': {
// target: 'http://baidu.com:8080', //真實請求的目標(biāo)地址
// changeOrigin: true,
// pathRewrite: {
// '^http://localhost:8080/': ''
// }
// }
// },
before: (app) => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
（5）當(dāng)然如果你不想用3.0的話谨履，還是可以拉取 2.x 模板 (舊版本)，參考官網(wǎng)：
Vue CLI >= 3 和舊版使用了相同的 vue 命令熬丧，所以 Vue CLI 2 (vue-cli) 被覆蓋了笋粟。如果你仍然需要使用舊版本的 vue init 功能，你可以全局安裝一個橋接工具：
npm install -g @vue/cli-init
# `vue init` 的運行效果將會跟 `vue-cli@2.x` 相同
vue init webpack my-project
二析蝴、vue項目里面到底是些啥害捕？該如何理解？
（1） 其實我感覺最重要的實操部分就是src文件夾中的文件了闷畸，其余部分就是為了項目更方便管理運行下去的配置文件尝盼。
（2） App.vue/main.js/router文件夾中的router.js聯(lián)系
不得不說vue的奧妙之處 ，可能一開始有些難理解佑菩，但只要理解了會非常好用盾沫，輕便裁赠。
main.js中，比如你想引一個element的ui庫赴精，你可以在這里面配置
這是element-ui的官方地址
有的人生成的main.js可能不一樣佩捞，但作用其實是一樣的
因為在Vue構(gòu)造函數(shù)時，需要配置一個el屬性蕾哟，如果沒有沒有el屬性時一忱，可以使用.$mount('#app')進行掛載。
App.vue中谭确，我覺得最重要的就是<router-view />
有人可能又要問帘营，首頁的話我想顯示其他內(nèi)容，并不想在App.vue中寫過多的東西逐哈，那如何處理呢芬迄？
只需要在router文件中配置好就ok啦！只要讓訪問 / 路由的人跳轉(zhuǎn)到首頁就可以啦鞠眉，下面是我的一個例子薯鼠，在home.vue中是各個組件的拼接的導(dǎo)航欄，index.vue是主頁：
這里關(guān)于路由我可能講的不太詳細械蹋，之后會在介紹路由的時候詳細的講出皇。這就是大概的項目框架的樣子。
