1.构建开发环境,输入版本号,确定已有开发环境
2. 输入命令安装vue-cli,并查看Vue版本号确定OK了。
npm install -g @vue/cli
如果你需要下载指定版本
npm install -g @vue/cli@指定版本号
安装完成,检查vue版本
3.开始创建Vue项目
- vue create 项目名称
- cd 创建项目名称
- npm run serve
基础环境创建OK
4.在根目录下新建vue.config.js
vue.config.js 是一个可选的配置文件,如果项目的 (和 package.json 同级的) 根目录中存在这个文件,那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段,但是注意这种写法需要你严格遵照 JSON 的格式来写。
- 根据情况按需配置vue.config.js
module.exports = {
// 基本路径
// baseUrl: '/', //从 Vue CLI 3.3 起已弃用,请使用publicPath
publicPath: isProduction ? '/dist/' : '/', // 部署生产环境和开发环境下的URL:可对当前环境进行区分
// 输出文件目录 始终使用 outputDir 而不要修改 webpack 的 output.path
outputDir: 'ko-h5-vue',
// 放置生成的静态资源 (js、css、img、fonts) 的 (相对于 outputDir 的) 目录
assetsDir: 'static',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
productionSourceMap: false, // 如果你不需要生产环境的 source map,可以将其设置为 false 以加速生产环境构建。
// 是否使用完整的内置浏览器编译器
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
compiler: false,
// webpack配置 详见 https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
// vue-loader 配置项 详见 https://vue-loader.vuejs.org/en/options.html
vueLoader: {},
// 生产环境是否生成 sourceMap 文件
productionSourceMap: true,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
// css预设器配置项
loaderOptions: {},
// 启用 CSS modules for all css / pre-processor files.
modules: false
},
// webpack-dev-server 相关配置
devServer: {
port: '8090', // 端口号
https: false, // 关闭https
hotOnly: false, // 取消热更新
// proxy: { // 使用代理
// '/api': {
// target: '//www.woyouzhe.com', // 目标代理服务器地址
// changeOrigin: true, // 是否允许跨域
// target: 'http://****.****.****.****:8001', //目标接口域名
// secure: false, //false为http访问,true为https访问
// pathRewrite:{
// '^/api': '' // 重写路径,需要设置重写的话,要在后面的调用接口前加上/api来代替target
// }
// }
// }
}, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
}