安裝環(huán)境
- 首先安裝nodeJs种吸，網(wǎng)上下載坚俗，不提了
- 全局安裝webpack
npm install webpack -g猖败，使用命令webpack -v獲取當前webpack版本 - 全局安裝webpack-cli恩闻，
npm install webpack webpack-cli -g - 全局安裝vue-cli幢尚，3.0對應的新命令為：
npm install -g @vue/cli尉剩，或者yarn global add @vue/cli边涕，使用命令vue -V(大寫的V)或者vue --version來獲取當前vue-cli的版本
創(chuàng)建項目
- 使用命令
vue create (項目名稱)，回車創(chuàng)建 -
選擇第一項默認配置宠蚂，或者第二項手動配置
image.png -
若選擇手動配置，配置項如下：
image.png - 按空格選擇，回車確定项栏，這里因人而定沼沈，我選擇了
Babel列另、Router页衙、Vuex店乐、CSS Pre-processors四項，分別表示ES6轉(zhuǎn)ES5棒妨、路由券腔、數(shù)據(jù)管理纷纫、css預處理器 - 之后詢問是否使用
Router的history模式辱魁，選擇“是” - 使用哪種CSS預處理器参滴，我選擇了
Less - 是否作為模板保存砾赔，方便以后用暴心？這個隨意专普，花點時間等待脆诉，自行創(chuàng)建完畢
- 安裝axios
npm install axios - 安裝vux：
npm install vux --save、npm install vux-loader --save-dev偶摔、npm install vue-loader@14.2.2 -D - 創(chuàng)建vue.config.js文件辰斋，進行如下配置：
module.exports = {
// 項目部署的基礎路徑
// 我們默認假設你的應用將會部署在域名的根部，
// 比如 https://www.my-app.com/
// 如果你的應用時部署在一個子路徑下藕夫，那么你需要在這里
// 指定子路徑毅贮。比如，如果你的應用部署在
// https://www.foobar.com/my-app/
// 那么將這個值改為 `/my-app/`
baseUrl: '/',
// 將構(gòu)建好的文件輸出到哪里
outputDir: 'dist',
// 放置靜態(tài)資源的地方 (js/css/img/font/...)
// assetsDir: '',
// 是否在保存的時候使用 `eslint-loader` 進行檢查瑰煎。
// 有效的值：`ture` | `false` | `"error"`
// 當設置為 `"error"` 時丢间，檢查出的錯誤會觸發(fā)編譯失敗诀艰。
lintOnSave: true,
// 使用帶有瀏覽器內(nèi)編譯器的完整構(gòu)建版本
// 查閱 https://cn.vuejs.org/v2/guide/installation.html#運行時-編譯器-vs-只包含運行時
// compiler: false,
// babel-loader 默認會跳過 node_modules 依賴。
// 通過這個選項可以顯式轉(zhuǎn)譯一個依賴绿满。
transpileDependencies: [/* string or regex */],
// 是否為生產(chǎn)環(huán)境構(gòu)建生成 source map？
productionSourceMap: false,
// 調(diào)整內(nèi)部的 webpack 配置橘霎。
// 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/webpack.md
chainWebpack: () => { },
configureWebpack: () => { },
// CSS 相關(guān)選項
css: {
// 將組件內(nèi)的 CSS 提取到一個單獨的 CSS 文件 (只用在生產(chǎn)環(huán)境中)
// 也可以是一個傳遞給 `extract-text-webpack-plugin` 的選項對象
extract: true,
// 是否開啟 CSS source map？
sourceMap: false,
// 為預處理器的 loader 傳遞自定義選項。比如傳遞給
// sass-loader 時处窥，使用 `{ sass: { ... } }`滔驾。
loaderOptions: {},
// 為所有的 CSS 及其預處理文件開啟 CSS Modules弄匕。
// 這個選項不會影響 `*.vue` 文件剩瓶。
modules: false
},
// 在生產(chǎn)環(huán)境下為 Babel 和 TypeScript 使用 `thread-loader`
// 在多核機器下會默認開啟延曙。
parallel: require('os').cpus().length > 1,
// PWA 插件的選項布疙。
// 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli-plugin-pwa/README.md
pwa: {},
// 配置 webpack-dev-server 行為。
devServer: {
open: process.platform === 'darwin',
host: 'localhost',
port: 8888,
https: false,
hotOnly: false,
open:true,
// 查閱 https://github.com/vuejs/vue-docs-zh-cn/blob/master/vue-cli/cli-service.md#配置代理
proxy: 'http://localhost:3001', // string | Object
before: app => { }
},
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
// 為生產(chǎn)環(huán)境修改配置...
if(process.env.npm_lifecycle_event === 'analyze'){
config.plugins.push(
new BundleAnalyzerPlugin()
);
}
} else {
// 為開發(fā)環(huán)境修改配置...
}
},
// 第三方插件的選項
pluginOptions: {
}
}
命令
npm run serve：運行項目发钝，出現(xiàn)一個地址（http://localhost:8080）涛碑，瀏覽器訪問此網(wǎng)址锌唾，即為當前項目，之后無需刷新余黎，保存代碼后頁面自動更新
npm run build：打包項目，自動生成dist文件夾，即為項目最終需要上傳的目錄
Ctrl + C：中斷當前指令
