npm install -g @vue/cli
# OR
yarn global add @vue/cli
安裝之后费变，你就可以在命令行中訪問 vue 命令摧扇。你可以通過簡(jiǎn)單運(yùn)行 vue，看看是否展示出了一份所有可用命令的幫助信息挚歧，來驗(yàn)證它是否安裝成功扛稽。
你還可以用這個(gè)命令來檢查其版本是否正確 (3.x)：
vue --version
下面來創(chuàng)建一個(gè)項(xiàng)目：
vue create hello-world
你會(huì)被提示選取一個(gè) preset。你可以選默認(rèn)的包含了基本的 Babel + ESLint 設(shè)置的 preset滑负，也可以選“手動(dòng)選擇特性”來選取需要的特性在张。
我這里選擇了默認(rèn)設(shè)置。
Vue-cli3 搭建的項(xiàng)目 界面相對(duì)vue-cli2.0之前較為簡(jiǎn)潔
1553051151(1).png
之前的build和config文件夾不見了矮慕，那么應(yīng)該如何配置 如webpack的配配置呢
只需要在項(xiàng)目的根目錄下新建 vue.config.js 文件（是根目錄帮匾，不是src目錄）
vue.config.js配置如下：
module.exports = {
// 基本路徑
publicPath: './', //部署應(yīng)用包時(shí)的基本 URL
outputDir: 'dist', // 輸出文件目錄
assetsDir: '',//放置生成的靜態(tài)資源 (js、css痴鳄、img瘟斜、fonts) 的 (相對(duì)于 outputDir 的) 目錄
runtimeCompiler: false, //是否使用包含運(yùn)行時(shí)編譯器的 Vue 構(gòu)建版本。設(shè)置為true可以使用template
productionSourceMap: false,//生產(chǎn)環(huán)境是否生成 sourceMap 文件
lintOnSave: true,
chainWebpack(config) {
config.resolve.alias
// .set('style', resolve('public/style'))
config.output.filename('js/[name].[hash:16].js');//hash值設(shè)置
config.output.chunkFilename('js/[id].[hash:16].js');
// config.output.filename('css/[name].[hash:16].css');//hash值設(shè)置
},
configureWebpack: () => {
},
// css相關(guān)配置
css: {
// 是否使用css分離插件 ExtractTextPlugin
extract: true,
// 開啟 CSS source maps?
sourceMap: false,
// css預(yù)設(shè)器配置項(xiàng)
loaderOptions: {},
// 啟用 CSS modules for all css / pre-processor files.
modules: false
},
parallel: require('os').cpus().length > 1,//是否為 Babel 或 TypeScript 使用 thread-loader
// 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: 8888,
https: false,
hotOnly: false,
proxy: null, // 設(shè)置代理
before: app => {
}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}
