采用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下的解决方案:
https://marketplace.visualstudio.com/items?itemName=slints.SlintsVSCodeSnippets
添加配置:settings.json
{
"eslint.autoFixOnSave": true,
"eslint.validate": [
{
"language": "vue",
"autoFix": true
},
"javascript",
"vue"
]
}
采用如下命令启动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)
}
...