vue3.0 脚手架配置
版本需求vue cli 需求node.js版本8或者更高全局安装npm install -g @vue/cliyarnglobal add @vue/cli如果没有安装yarn的需要安装安装地址;https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable”检测安装1.vue项目创建1.0运行vue cre...
·
版本需求
vue cli 需求node.js版本8或者更高
全局安装
npm install -g @vue/cli
yarn global add @vue/cli
如果没有安装yarn的需要安装
安装地址;https://yarnpkg.com/lang/zh-hans/docs/install/#windows-stable”
检测安装
1.vue项目创建
1.0运行
vue create vue-home
// vue-home 为项目文件夹名称
2.0选择默认配置,或者自己配置
第一个是默认配置,第二个是自己配置
3.0选择配置
Babel Babel编译需要将es6转换为es5
TypeScript
Router vue路由
vuex vue状态管理器
CSS Pre-processors css预编辑器
Linter / Formatter 代码检测和格式化
Unit Testing 单元测试
E2E Testing 端测试
//以上配置自由选择,如果需要第一个可以直接按数字1
2.项目基本搭建完毕
3. 配置vue.config.js
vue.config.js需要自己手动配置,以下简单的介绍了一些配置,基本够用
const path = require('path')
const debug = process.env.NODE_ENV !== 'production'
module.exports = {
baseUrl: '/', // 根域上下文目录
outputDir: 'dist', // 构建输出目录
assetsDir: 'assets', // 静态资源目录 (js, css, img, fonts)
lintOnSave: false, // 是否开启eslint保存检测,有效值:ture | false | 'error'
runtimeCompiler: true, // 运行时版本是否需要编译
transpileDependencies: [], // 默认babel-loader忽略mode_modules,这里可增加例外的依赖包名
productionSourceMap: true, // 是否在构建生产包时生成 sourceMap 文件,false将提高构建速度
configureWebpack: config => { // webpack配置,值位对象时会合并配置,为方法时会改写配置
if (debug) { // 开发环境配置
config.devtool = 'cheap-module-eval-source-map'
} else { // 生产环境配置
}
// Object.assign(config, { // 开发生产共同配置
// resolve: {
// alias: {
// '@': path.resolve(__dirname, './src'),
// '@c': path.resolve(__dirname, './src/components'),
// 'vue$': 'vue/dist/vue.esm.js'
// }
// }
// })
},
chainWebpack: config => { // webpack链接API,用于生成和修改webapck配置,https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
if (debug) {
// 本地开发配置
} else {
// 生产开发配置
}
},
parallel: require('os').cpus().length > 1, // 构建时开启多进程处理babel编译
pluginOptions: { // 第三方插件配置
},
pwa: { // 单页插件相关配置 https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-pwa
},
devServer: {
open: true,
host: 'localhost',
port: 8080,
https: false,
hotOnly: false,
proxy: { // 配置跨域
'/api': {
target: 'https://localhost:5010/api/',
ws: true,
changOrigin: true,
pathRewrite: {
'^/api': ''
}
}
},
before: app => { }
}
}
**注:2.项目基本搭建完毕 选择配置说得不是很完整,以下链接文章,说得比较详细《感谢参考》
https://blog.csdn.net/qq_36407748/article/details/80739787
更多推荐
已为社区贡献6条内容
所有评论(0)