安装的各种方式
一.vue3test2 啥都没有安装
说明：
1.是否保存配置：
Save this as a preset for future projects? (Y/n) // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
Save preset as: name // 然后你下次进入配置可以直接使用你这次的配置了二. vue3test1 安装了babel、eslint
项目目录：
多了1个文件：babel.config.js，主要修改了3个 文件 ：package.json、main.js、HelloWorld.vue
babel.config.js
package.json
main.js
HelloWorld.vue
三.vue3test3 安装了babel、linter
三者对比
新增了 2个文件：.editorconfig、babel.config.js，修改了3个文件 ：package.json、main.js、HelloWorld.vue
.editorconfig
babel.config.js
package.json
main.js
HelloWorld.vue
四. 第四种和第三种的创建方式稍微不同，如下 ，可以发现第四种方式和 vue-cli2的 结构目录最为相似
对比vuetest3和vue3test4
看一下两者的package.json文件，就都明白了
五. 安装了Router、CSS Pre-processors
说明：
1.是否使用路由的history模式：
这里我建议选No，这样打包出来丢到服务器上可以直接使用了，后期要用的话，也可以自己再开起来。选yes的话需要服务器那边再进行设置。
Use history mode for router? (Requires proper server setup for index fallback in production)
// 路由使用history模式?(在生产环境中需要适当的服务器设置以备索引)2.选择什么时候进行代码规则检测：
建议选保存就检测，等到commit的时候，问题可能都已经积累很多了。
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)
>( ) Lint on save // 保存就检测
( ) Lint and fix on commit // fix和commit时候检查比较：
第3和第5比较
多了3个文件：router.js、Home.vue、About.vue
修改了4个文件：package.json、main.js、App.vue、HelloWorld.vue
router.js
import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'home',
component: Home
},
{
path: '/about',
name: 'about',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
}
]
})
Home.vue
<template>
<div class="home">
<img alt="Vue logo" src="../assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
About.vue
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
package.json
main.js
App.vue
HelloWorld.vue
