vue脚手架3详细配置，爆肝两天，你可以不用，但是不能不会_陈新科的博客

vue脚手架3.X+

由于之前我们安装了 2.x 版本的脚手架，现在我们需要安装 3.x 版本的脚手架。 因为 Vue-cli 3.x 和 vue-cli 2.x使用了相同的 vue 命令，所以 vue-cli 2.x 被覆盖了。如果你仍然需要使用旧版本的 vue init 功能，那么可以全局安装一个桥接工具。

桥接工具安装

npm 如果有问题的话可以使用 cnpm 进行安装 , 二者选其一即可

如果没有安装旧版本的 vue-cli 2.x 可以跳过桥接直接安装 vue-cli 3.x 及以上

安装vue-cli 3.x+

3.x 及以上安装都是使用上面的指令， npm 和 cnpm 选择一个来安装就好。测试是否安装成功，在 命令窗口输入vue -V 查看 vue 脚手架版本号就是安装成功。如下图所示：

创建项目

创建项目需要注意：项目名不能有中文，不支持驼峰 ( 含有大写字母 )

运行创建项目命令后弹出来的：

default 是 使用默认配置，默认安装及自动配置 babel ， eslint

如果选择默认选项 default ，将会构建一个最基本的 vue 项目（没有 vue-router 也没有 vuex ）

注意 ：上面两个 default 一个是 vue2 ，一个是 vue3 （我们现在学的是 vue2, 所以选择 vue2 即可）

Manually select features 是 自定义配置，需要我们手动配置，也可以自己选择需要配置的

这里我选择手动配置（Manually select features）

通过键盘上的 ↓ 方向键选中Manually select features并敲回车，会显示如下配置项

选择你需要的配置项

( ) Choose Vue version // 选择 vue 脚手架的版本

( ) Babel // 转码器，可以将 ES6 代码转为 ES5 代码，从而在现有环境执行。

( ) TypeScript // TypeScript 是一个 JavaScript （后缀 .js ）的超集（后缀 .ts ）包含并扩展了

JavaScript 的语法，

     需要被编译输出为 JavaScript 在浏览器运行

( ) Progressive Web App ( PWA ) Support // 渐进式 Web 应用程序

( ) Router // vue - router （ vue 路由）

( ) Vuex // vuex （ vue 的状态管理模式）

( ) CSS Pre - processors // CSS 预处理器（如： less 、 sass ）

( ) Linter / Formatter // 代码风格检查和格式化（如： ESlint ）

( ) Unit Testing // 单元测试（ unit tests ）

( ) E2E Testing // e2e （ end to end ） 测试

 

node-sass 是自动编译实时的， dart-sass 需要保存后才会生效。 sass 官方目前主力推 dart-sass 最新的特性都会在这个上面先实现。而且Sass/Scss 性能会更好 , 会更快一些。

 

项目启动

 

vue-cli3与2版本区别

• vue-cli3基于webpack4打造，vue-cli2是基于webpack3
• vue-cli3的设计原则是"0配置"，移除了配置文件，build和confifig等
• vue-cli3提供 vue ui 的命令，提供了可视化配置
• 移除了static文件夹，新增了public文件夹，并将index.html移入了public文件夹
• 创建项目的命令 vue create 项目名

目录结构：

这里创建的 vue 实例没有 el 属性，而是在实例后面添加了一个 $mount(’#app’) 方法。

$mount(’#app’) ：手动挂载到 id 为 app 的 dom 中的意思

当 Vue 实例没有 el 属性时，则该实例尚没有挂载到某个 dom 中；假如需要延迟挂载，可以在之后手

动调用 vm.$mount() 方法来挂载

import Vue from 'vue' //导入构造函数
import App from './App.vue'//导入根组件App.vue
//构建信息是否显示
Vue.config.productionTip = false
new Vue({
//这里的render: h=> h(App)是es6的写法, render: h => h(App)可理解为是渲染App组件
render: h => h(App),
// render: h => h(App) 转换过来就是：
// render:(function(h){
// return h(App);
// });
}).$mount('#app')

虽然项目创建完了，但无法满足定制化的开发需求，因为有时我们希望项目一启动就自动打开浏 览器页面。这个时候就需要手动创建一个配置文件。

//在module.exports中修改配置
module.exports = {
devServer: {
open: true, // 启动服务后是否打开浏览器
}
}

• 博主公_号：前端老实人，期待各位小伙伴加入我们一起学习的队伍哦❤