Vue-Cli3_mobile_0

297 阅读2分钟

项目环境基础配置:

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 = {

cli.vuejs.org/zh/config/#…

}

*configureWebpack这个配置项通过webpack_merge的方法可以写原生的webpack ,从而达到脚手架不能实现的配置。

;) bye/