1.安装
- 提示:vue cli 的包名称由 vue-cli 改成了 @vue/cli。 如果你已经全局安装了旧版本的 vue-cli (1.x 或 2.x),你需要先通过 npm uninstall vue-cli -g 或 yarn global remove vue-cli 卸载它。
- npm 更至最新-----------node >=8.9
npm install -g @vue/cli (mac 需要前面加 sudo )
vue -V // @vue/cli 4.5.7
2.在新文件夹下创建项目 vue create my-project
vue create 项目名
之后自己选择配置(选择默认(default)还是手动(Manually))
3.配置自动打开浏览器
1.在paga.json 平级 创建 vue.config.js (必须这个名字)
const path = require('path')
module.exports = {
devServer: {
open: true,
host: '0.0.0.0',
port: 8080,
proxy: {
'/tim': {
target: 'http://192.168.90.111:8090',
changOrigin: true
}
}
},
publicPath: './',
outputDir: 'dist-' + process.env.NODE_ENV,
assetsDir: 'static',
css: {
loaderOptions: {
sass: {
data: `@import "@/styles/scss/common.scss";`
}
}
},
chainWebpack: config => {
const types = ['vue-modules', 'vue', 'normal-modules', 'normal']
types.forEach(type =>
addStyleResource(config.module.rule('stylus').oneOf(type))
)
},
productionSourceMap: false,
configureWebpack: config => {
if (process.env.NODE_ENV === 'production') {
config.optimization.minimizer[0].options.terserOptions.compress.warnings = false
config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
config.optimization.minimizer[0].options.terserOptions.compress.drop_debugger = true
config.optimization.minimizer[0].options.terserOptions.compress.pure_funcs = ['console.log']
}
}
}
function addStyleResource(rule) {
rule
.use('style-resource')
.loader('style-resources-loader')
.options({
patterns: [path.resolve(__dirname, './src/styles/common.styl')]
})
}