项目环境基础配置:
vue-cli:4.2.3 node :8.11.2
如果之前安装过 vue-cli版本,请使用 npm uninstall vue-cli -g || yarn global remove vue-cli 卸载。
使用 npm install -g @vue/cli || yarn global add @vue/cli 安装。
查看vue-cli 版本是否安装正确命令 vue --version 。
*vue-cli3 和 vue-cli4 版本只有一些api的弃用。
创建项目:
vue create hello-world*注意项目名称不能使用大写字母
创建项目时,如果网速慢,会提示让你安装cnpm,忽略就好了,不推荐使用cnpm,不稳定。
此时图片会出现三个选项:
1.定义一个自己常用的配置项。选择第一个配置完成之后,vue 会写入配置记录你所选的配置,第二次新建项目时,可以直接选择。生成的配置是一个隐藏文件 .vuerc 。可以用记事本打开并且修改。
*注意如果都删除所选的配置项的话,会报错。请保留一个花括号。
2.默认选项,有babel,eslint。
3.手动设置一个项目初始化的配置
第三个选项把所有常使用的插件都列举出来。使用键盘字母 “A” 是全选和反选。空格选中。回车确定。
使用package.json
是否生成常用配置文件。作出选择后会得到熟悉的页面。
按照上述命令操作,启动程序。
项目目录:
1.相比vue-cli2目录更简洁。
2.静态文件更名。index.html文件移入。
3.添加.gitignore文件,可设置忽略和删除文件。
4.config文件手动配置。
可见,最大的变化是config文件消失了。vue现在对于webpack 的使用和React的最大不同就是不需要开发者会webpack。读取vue_cli的推荐配置即可。vue 也不希望小白用户去修改config。下图中 ui 的命令就是视图化的去创建一个项目,可以管理插件,依赖,运行情况等资源。这也许就是vue以后的大趋势。
vue --help
调出的命令,大家可以一一去尝试。
config:
在根目录新建 vue.config.js
module.exports = {
}
*configureWebpack这个配置项通过webpack_merge的方法可以写原生的webpack ,从而达到脚手架不能实现的配置。
;) bye/