vue实践之采用vue-cli3.x创建项目

采用vue创建项目的时候控制台提示需要升级，于是就笨头笨脑的升级了，结果采用vue-cli3创建项目的时候出了一堆错误，顿时懵了。于是开始了解vue-cli3.x的相关知识，刚开始还是好不习惯，不过习惯之后，发现vue-cli3.x挺好用的，不过到底是否采用vue-cli3.x还是vue-cli2.x，还是看个人喜好了

依赖管理

首先

介绍一下相关的文档

vue-cli3.x官方文档： https://cli.vuejs.org/

vue.js 官方文档 https://cn.vuejs.org/v2/guide/

另外配合vue使用的一些依赖：

• element-ui https://element.eleme.cn/2.0/#/zh-CN/component/installation

• @form-create/element-ui http://www.form-create.com/v2/element-ui/

• vue-router https://router.vuejs.org/

• vue-bus https://github.com/yangmingshan/vue-bus#readme

• axios https://github.com/axios/axios

• vue-axios https://github.com/imcvampire/vue-axios#readme

• eslint https://eslint.org/docs/user-guide/configuring

其中form-create用来动态创建表单

创建项目

获取vue-cli

npm install -g @vue/cli
npm install -g @vue/cli-service-global

创建项目

npm install -g @vue/cli-init
# vue init now works exactly the same as [email protected]
vue init webpack my-project

也可以采用新版本创建项目

vue create hello-world

不过这里是带坑的，因为创建项目有可能会保留之前的设置，所以尽量全部选项都看一遍。
实在不行的话，还是使用原来的创建项目的方式

这里值得一提的是，采用eslint很可能会让程序运行失败，所以对于初学者非常不友好，尤其是如果采用编辑器，如VSCode，进行自动格式化的话，有可能与eslint的格式不一致，所以非常坑。

还没入门，就被拦截在这里了。

接下来介绍一下VSCode下的解决方案：

1. 在根目录下创建文件：.prettierrc

{
  "semi": false
}

2. 编辑文件：.eslintrc.js

// required to lint *.vue files
  plugins: ["vue"],
  // add your custom rules here
  rules: {
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off",
    quotes: [1, "double"], //引号类型 `` "" ''
    "no-unused-vars": "warn", //把该条提示信息转换成警告信息
    "vue/prop-name-casing": ["error", "camelCase"],
    "space-before-function-paren": ["error", "ignore"],
    // or
    "space-before-function-paren": [
      "error",
      {
        anonymous: "ignore",
        named: "ignore",
        asyncArrow: "ignore"
      }
    ]
  }

3. 安装VSCode插件：Slints VSCode Snippets

https://marketplace.visualstudio.com/items?itemName=slints.SlintsVSCodeSnippets

添加配置：settings.json

{
  "eslint.autoFixOnSave": true,
  "eslint.validate": [
    {
      "language": "vue",
      "autoFix": true
    },
    "javascript",
    "vue"
  ]
}

vue-cli3 GUI界面

采用如下命令启动GUI界面

vue ui

GUI界面实际上可以服务于所有vue项目，可以导入之前的vue项目，然后切换当前的vue项目：

vue项目管理

同时还可以启动任务：

任务管理

还可以搜索和安装依赖，可以查询到相对应的文档：

安装依赖

然后就可以开开森森顺顺利利的开发项目了，基本上不需要敲命令，安装依赖、删除依赖、运行项目，都可以在GUI界面通过点击完成，从而简化了开发，可以把更多的精力放到开发中来

最后关于打包：

config/index.js / build:

...
    assetsSubDirectory: "./static",
    assetsPublicPath: "./",
...

build/util.js / function generateLoaders(loader, loaderOptions):

...
if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: "vue-style-loader",
        publicPath: "../../" // 这里添加
      })
    } else {
      return ["vue-style-loader"].concat(loaders)
    }
...