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使用的一些依赖:

其中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 vue-cli@2.x
vue init webpack my-project

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

vue create hello-world

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

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

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

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

  1. 在根目录下创建文件:.prettierrc
{
  "semi": false
}
  1. 编辑文件:.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"
      }
    ]
  }
  1. 安装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)
    }
...

推荐阅读更多精彩内容

  • 基于Vue的一些资料 内容 UI组件 开发框架 实用库 服务端 辅助工具 应用实例 Demo示例 element★...
    尝了又尝阅读 560评论 0 1
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    小姜先森o0O阅读 6,522评论 2 71
  • 简说Vue (组件库) https://github.com/ElemeFE/element" 饿了么出品的VUE...
    Estrus丶阅读 215评论 0 0
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    柴东啊阅读 13,001评论 8 136
  • UI组件 element- 饿了么出品的Vue2的web UI工具套件 Vux- 基于Vue和WeUI的组件库 m...
    王喂马_阅读 4,996评论 4 74