vue-cli4从零搭建vue项目 之 《项目创建》
以前公司用的都是cli2.X,现在已经更新到4了，所以闲暇之余搞一把
一，卸载与安装
//卸载2.x
npm uninstall -g vue-cli
//卸载3.x
npm uninstall -g @vue/cli
//安装4.x
npm install -g @vue/cli
二，创建项目
创建项目分为命令行和图形化界面，图形化使用 vue ui ，这里我用命令行
vue create projectName
选择预设配置or自定义（选择自定义）
Vue CLI v4.3.1
? Please pick a preset: (Use arrow keys)
default (babel, eslint)
>Manually select features
我们来看看自定义哪些东西（按空格选择）
Vue CLI v4.3.1
? Please pick a preset: Manually select features
? Check the features needed for your project:
(*) Babel （将es6编译为可供低版本浏览器运行的代码）
( ) TypeScript （勾上即为创建ts项目）
( ) Progressive Web App (PWA) Support (不懂PWA可以自行百度，就是对标原生手机app的一种概念）
(*) Router
(*) Vuex
(*) CSS Pre-processors （css预处理）
(*) Linter / Formatter （代码风格、格式校验）
( ) Unit Testing (单元测试)
>( ) E2E Testing （端对端测试）
回车之后，再为每一项进行详细配置
TypeScript
// 是否使用class风格的组件语法
Use class-style component syntax?
// 是否使用babel做转义：
Use Babel alongside TypeScript for auto-detected polyfills?
路由
// 路由使用历史模式
Use history mode for router? (Requires proper server setup for index fallback in production)
css预编译
// 选择CSS 预处理类型:
Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
Linter / Formatter 代码风格、格式校验
这里我选一个标准配置
TSLint
ESLint with error prevention only 仅错误预防
ESLint + Airbnb config Airbnb配置
ESLint + Standard config 标准配置
ESLint + Prettier
这里保存时检查
Lint on save 保存时检查
Lint and fix on commit 提交时检查
选择 Babel, PostCSS, ESLint 等自定义配置的存放位置
这里我选第二个
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?
// 在专用的配置文件中
In dedicated config files
//在package.json
In package.json
保存预设为
自定义一个预设名称吧
Save preset as:
回车之后等待构建完成即可
三，启动项目
$ cd vue-cli4-template
$ npm run serve
执行以上命令即可访问本地80端口
四，项目配置
这个项目目录看起来比cli2的要精简了很多，个人感觉更合理了
注：public文件夹不会被打包,可以用来做一些打包后的接口配置等
webpack 有关配置
在项目根目录下新建vue.config.js文件与package.json同级
其实真正需要修改的不多，简单的项目，大部分配置都默认好了，不需要修改，
我贴下一个简单的，具体可以看看官方文档 官方配置文档
module.exports = {
// publicPath:process.env.NODE_ENV === 'production' ? '/vue_workspac/aihuhuproject/' : '/',
//基本路径
publicPath: './',//默认的'/'是绝对路径，如果不确定在根路径，改成相对路径'./'
// 输出文件目录
outputDir: 'dist',
assetsDir:'static',
indexPath:'index.html',
// eslint-loader 是否在保存的时候检查
lintOnSave: true,
// 生产环境是否生成 sourceMap 文件
productionSourceMap: false,
// css相关配置
css: {
// 是否使用css分离插件 ExtractTextPlugin
extract: true,
// 开启 CSS source maps?
sourceMap: false,
},
// webpack-dev-server 相关配置
devServer: {
open: false,//open 在devServer启动且第一次构建完成时，自动用我们的系统的默认浏览器去打开要开发的网页
host: '0.0.0.0',//默认是 localhost。如果你希望服务器外部可访问，指定如下 host: '0.0.0.0'，设置之后之后可以访问ip地址
port: 8080,
hot:true,//hot配置是否启用模块的热替换功能，devServer的默认行为是在发现源代码被变更后，通过自动刷新整个页面来做到事实预览，开启hot后，将在不刷新整个页面的情况下通过新模块替换老模块来做到实时预览。
https: false,
hotOnly: false,// hot 和 hotOnly 的区别是在某些模块不支持热更新的情况下，前者会自动刷新页面，后者不会刷新页面，而是在控制台输出热更新失败
proxy: {
'/': {
target: 'http://xxxx:8080', //目标接口域名
secure: false, //false为http访问，true为https访问
changeOrigin: true, //是否跨域
pathRewrite: {
'^/': '/' //重写接口
}
}
}, // 设置代理
before: app => {}
},
// 第三方插件配置
pluginOptions: {
// ...
}
};
eslint 有关配置
同样在项目根目录下新建 .eslintrc.js
我的另一篇博客有在vue-cli中使用eslint的详细介绍 eslint在vue项目中的使用
环境与变量模式
这里做一个简单的配置，具体见官方文档
将项目分为开发，生产，环境，在根目录下建立不同的文件，对应不同的环境变量
常用场景是以此来区分后台接口的url，和设置一些eslint规则，比如生产环境下 no-console
在项目根目录下新建三个文件对应三种环境（第一个是基础环境，优先级最低，会被后面的覆盖）
.env
.env.development
# 开发环境基础url
VUE_APP_URL=http://11.11.11.111
.env.production
# 生产环境基础url
VUE_APP_URL=http://22.22.22.222
然后可以在Home.vue组件中测试一下
mounted () {
console.log(process.env.VUE_APP_URL)
}
后面就可以在封装axios时直接使用这个process.env.VUE_APP_URL
另外还有一个process.env.NODE_ENV变量，可以用以区分环境，可以自己打印出来看看
按网上说这个变量不是内置的，但是我没有在.env文件里声明，应该也是被内置了吧
其实这个process.env是node的一个全局对象，我的另一篇文章有记录 process.env初探
至此，基本配置已经结束，后面可以根据项目需要进行扩展，下一步就是进行项目的搭建与一些简单封装了，我会另开一篇博客
有人看的话可以在评论下方留言