vue（四） vue cli3

1.下载vue脚手架

npm install -g @vue/cli

2.使用vue cli3创建项目

1 打开vscode,打开存放项目的文件夹，建一个终端
2.执行创建项目命令

vue create projectname   

这里的projectname为项目名称,不能有大写字母

3.选择预置

选下面那个是自己配

4.选择项目需要用到的功能

按键盘↑ ↓键进行选择,按空格键选择其中某一个

本文选择如下几项功能:

Babel
Router
Vuex
Css Pre-processors
Lint/Formatte

5.是否使用history路由

本文暂未使用,如需使用可参考 Routing with history.pushState

6.选择css处理器

这里本文选的less

7.代码风格和eslint

根据个人习惯选择即可

8.选择在保存时还是在提交时修改

9.选择lint的配置文件如何存放

为了便于管理,这里选择分别存到具体的config文件

10.是否保存本次创建项目的配置项
可用于下次快速创建项目，但每次项目要求不一样，一般不保存

11.创建完成的项目目录结构

项目目录结构

12.vue cli配置文件

{
    "packageManager": "npm",
    "presets": {
        "vue_create_project": {
        "useConfigFiles": true,
         "plugins": {
            "@vue/cli-plugin-babel": {},
            "@vue/cli-plugin-eslint": {
             "config": "standard",
             "lintOn": [
                "save"
                ]
            }
        },
    "router": true,
    "routerHistoryMode": false,
    "vuex": true,
    "cssPreprocessor": "sass"
    }
},

packageManager 用于指定安装包和运行时，使用的是npm还是yarn
presets 上述安装步骤中，第10步询问是否保存创建配置，用于下次快速创建项目
关于配置，不小心踩的坑
安装过程中，曾经询问过我是用npm还是yarn指定安装包和运行，但是，由于没细看，选了yarn，后续安装过程中一直报错，具体错误如下图：

多次卸载重装vue cli，但是并没有解决问题，也没有重新提醒我选择npm或者yarn。
想了想，那可能是配置文件的问题了，但是又不知道vue cli 3的配置文件存在哪，想了想，会不会和设置npm源一样，可以用npm config这类指令呢
于是，打开了cmd，输入了vue -h

看到了有vue config指令，输入后显示如下：

除了把配置文件打印出来，还把配置文件路径打印出来了，so，不用看了，多次卸载重装,但是依旧未果的原因，就是因为卸载重装不会删除配置文件，这里直接把packageManager改成npm，就解决了上面遇到的问题了
————————————————

vue-cli3.0添加插件方法
例如，添加vuetify UI插件，使用如下命令

vue add vuetify

如果是普通的插件，不会对页面结构有太多的影响，还可以继续使用npm install的方法

npm install axios
全局变量的使用

在项目根目录下创建.env文件，添加自己的配置信息，通过process.env.环境变量名得到环境变量值。

同样，我们可以创建.env.development文件（开发环境）、.env.production文件（生产环境）

vue-cli3.0独立运行.vue文件
我们可以使用vue serve和vue build命令独立运行单个* .vue文件，但是需要先使用如下命令安装一个额外的全局插件：

npm install -g @vue/cli-service-global
or
yarn global add @vue/cli-service-global
使用vue serve运行单个vue文件

vue serve HelloWorld.vue
vue项目管理器
使用如下命令打开图形化vue项目管理器，如下图所示：

vue ui

在项目左侧项目依赖添加项目所需要的依赖

搜索需要的依赖选中，在右下角安装依赖

vue-cli3.0配置基础的路径

项目根目录创建vue.config.js文件

module.exports = {
    baseUrl: '/', //根路径
    outputDir: 'dist',  //构建输出目录
    assetsDir: 'assets', //静态资源目录（js,css,img,fonts）
    lintOnSave: false,     //是否开启eslint保存监测，有效值： true || false || 'error'
    devServer: {
        open: true,      //打开页面
        host: 'localhost',   //域名   127.0.0.0本机    0.0.0.0真机测试
        port: '8081',     //端口号
        https: false,    //是否使用https
        hotOnly: false,  //热更新
        proxy: {
            //配置跨域
            '/api': {
                target: 'http://localhost:5000/api/',   //协议头、域名、端口号有一个不同就是跨域
                ws: true,      //是否跨域
                changOrigin: true,
                pathRewrite: {
                    '^/api': ''
                }
            }
        }
    }
};