安装新版本需要卸载旧版本
npm uninstall -g vue-cli

一.安装:

安装vue-cli3.0
npm install -g @vue/cli

查版本是否安装成功
vue -V

二.创建项目

vue create 项目名

1.选择模板

按键盘上下键选择默认（default）还是手动（Manually），如果选择default，一路回车执行下去就行了，这里我选择手动Manually

Vue CLI v4.4.4
┌─────────────────────────────────────────┐
│                                         │
│   New version available 4.4.4 → 4.4.6   │
│    Run npm i -g @vue/cli to update!     │
│                                         │
└─────────────────────────────────────────┘

? Please pick a preset:
  default (babel, eslint)
> Manually select features

2.选择配置

根据你的项目需要来选择配置,空格键是选中与取消，A键是全选

? Check the features needed for your project:
// 检查项目所需的功能:(按<space>选择，<a>切换所有，<i>反转选择）
 (*) Babel                                        //利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。
 ( ) TypeScript                                // 支持使用 TypeScript
 ( ) Progressive Web App (PWA) Support        // PWA 支持
 (*) Router                                    // 支持 vue-router
 (*) Vuex                                      // 支持 vux
>(*) CSS Pre-processors                       // 支持 CSS 预处理器。
 (*) Linter / Formatter                      // 支持代码风格检查和格式化。
 ( ) Unit Testing                              // 支持单元测试。
 ( ) E2E Testing

3.是否使用路由的 history 模式：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
:
// 选择CSS预处理器（默认支持PostCSS，Autoprefixer和CSS模块）：
  Sass/SCSS (with dart-sass)                 //  保存后才会生效
> Sass/SCSS (with node-sass)                //  自动编译实时的
  Less
  Stylus

4.选择Eslint代码验证规则：

? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default)
: Sass/SCSS (with node-sass)
? Pick a linter / formatter config: (Use arrow keys)
> ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
  ESLint + Prettier

5.选择什么时候进行代码规则检测：

建议选保存就检测，等到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时候检查

8.把babel,postcss,eslint这些配置文件放哪：

? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files              // 独立文件放置
  In package.json                        // 放package.json里

6.保存配置

? Save this as a preset for future projects? Yes   // 是否记录一下以便下次继续使用这套配置
// 选保存之后，会让你写一个配置的名字：
? Save preset as: divconf    // 然后你下次进入配置可以直接使用你这次的配置了

三.基础配置

框架已经搭建好了,但是还缺少配置项,加入css嵌套,axios,Element等方便快速开发.

1.经过上面的css预编译配置,默认支持css嵌套

<style lang = "scss" scoped>     //加上lang="scss",scoped代表此css只对当前组件生效,但是不建议加,会有影响,具体百度
.home{
  img{
    &:nth-child(1){
      width: 300px;
    }
  }
}
</style>

2.引入axios

cdn：
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

npm:

1.安装axios
npm install --save axios
2.在main.js中引入axios
import axios from 'axios'
3.将axios设置给Vue的原型对象
Vue.prototype.axios = axios
4.需要使用axios的位置

this.axios
        .get("url", {
          params: {
            index: index,
          },
        })
        .then((res) => {
          console.log(res.data.data);
        })
        .catch((error) => {
          console.log(error);
        });
    },

this.axios
        .post('url',{page:this.page},{
                        emulateJSON:true
                        }).then(result =>{
                        console.log(result.body.rows)
                        })

3.使用ElementUI框架
npm i element-ui -S

在mian.js下面加入下面内容,就可以直接在组件中使用ElementUI了

import Element from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(Element)

4.vue中引入JQ
npm install jquery --save-dev
在需要用到的地方引入 import $ from 'jquery'

注意:JQ代码要写到counted中,否则不生效

jq示例

vue-cli3项目搭建及基础配置