Vue Cli3 创建项目的方法步骤
75 浏览量
2020-10-17
21:19:25
上传
评论
收藏 71KB PDF 举报
Vue Cli3 创建项目的方法步骤创建项目的方法步骤
Vue CLI是一个用于快速Vue.js开发的完整系统。这篇文章主要介绍了Vue Cli3 创建项目的方法步骤，非常具有
实用价值，需要的朋友可以参考下
最近的开发项目中使用了vue-cli 3.0，使用体验可以说非常棒了，模板更加制定化，配置更加简洁。以下总结下应用过程中的
一些经验。
1. 安装安装
npm install -g @vue/cli
2. 创建一个项目创建一个项目
vue create iview-admin
# OR
vue ui
default (babel, eslint) 默认套餐，提供 babel 和 eslint 支持。
Manually select features 自己去选择需要的功能，提供更多的特性选择。比如如果想要支持 TypeScript ，就应该选择这
一项。
1. TypeScript 支持使用 TypeScript 书写源码。
2. Progressive Web App (PWA) Support PWA 支持。
3. Router 支持 vue-router 。
4. Vuex 支持 vuex 。
5. CSS Pre-processors 支持 CSS 预处理器。
6. Linter / Formatter 支持代码风格检查和格式化。
7. Unit Testing 支持单元测试。
8. E2E Testing 支持 E2E 测试。
3. 运行项目运行项目
$ npm run serve
4. 在根目录创建在根目录创建 vue.config.js 空文件，配置空文件，配置 文件文件
module.exports = {
/** 区分打包环境与开发环境
* process.env.NODE_ENV==='production' (打包环境)
* process.env.NODE_ENV==='development' (开发环境)
* baseUrl: process.env.NODE_ENV==='production'?"https://cdn.didabisai.com/front/":'front/',
*/
// 基本路径
baseUrl: '/',
// 输出文件目录
outputDir: 'dist',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// use the full build with in-browser compiler?
// https://vuejs.org/v2/guide/installation.html#Runtime-Compiler-vs-Runtime-only
// compiler: false,
// webpack配置
// see https://github.com/vuejs/vue-cli/blob/dev/docs/webpack.md
chainWebpack: () => {},
configureWebpack: () => {},
//如果想要引入babel-polyfill可以这样写
// configureWebpack: (config) => {
// config.entry = ["babel-polyfill", "./src/main.js"]
// },
// 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,
资源评论
