专栏首页全栈之路vue实践之采用vue-cli3.x创建项目

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 }
  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项目:

同时还可以启动任务:

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

然后就可以开开森森顺顺利利的开发项目了,基本上不需要敲命令,安装依赖、删除依赖、运行项目,都可以在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)
    }
...

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • golang构建项目的脚本

    具体配置,请查看 https://go.microsoft.com/fwlink/?LinkId=733558

    陨石坠灭
  • android studio 使用第三方模拟器连接方法

    陨石坠灭
  • 关于重构的总结

    重构是对软件内部的一种调整,目的是在不改变软件可观察行为的前提下,提高可理解性,降低其修改成本。

    陨石坠灭
  • 太原面经分享:如何在vue面试环节,展示你晋级阿里P6+的技术功底?

    一年一度紧张刺激的高考开始了,与此同时,我也没闲着,奔走在各大公司的前端面试环节,不断积累着经验,一路升级打怪。

    闰土大叔
  • 12 手写配置启动一个 vue2 项目

    2019年10月5日,vue 团队发布了 Vue3.0 预览版源码,预计到 2020 年第一季度将发布 3.0 正式版。3.0 包涵了许多激动人心的新特性。

    李艺

扫码关注云+社区

领取腾讯云代金券