Vue:使用Vue-cli3创建Vue项目
一、使用 Vue-cli3 创建 Vue 项目
1、检查当前 Vue 版本
输入下面的命令检查当前安装的 Vue-cli 版本:
$ vue -V
结果如下:
说明本机安装的是 3 版本。如果是 2.xx 版本,就需要先卸载掉旧版本,然后在安装新版本。卸载旧版本命令:
npm uninstall vue-cli -g
注意:上面检查 Vue-cli 版本的命令中,V 一定要大写。
2、下载并安装 Vue-cli3
使用下面的命令进行安装:
$ npm install @vue/cli -g
因为我本机已经安装了 vue-cli3,这里就不在演示了,安装时间稍微长一些,请耐心等待
3、使用命令行创建项目
下面先使用命令行工具创建一个 Vue 项目:
首先执行创建命令:
vue create my-project
如下图所示:
输入命令以后直接回车,然后会让你选择是使用默认(default)还是手动(Manually)。
注意:如果是在 Windows 平台上面使用命令行创建项目,Git Bash 有一个坑:就是使用键盘上面的方向键选择默认模式还是手动模式的时候不起作用,如果是使用默认默认,则用 Git Bash 或者 CMD、Power Shell 都一样。如果要选择手动模式,则要使用 CMD 或者 Power Shell。
按键盘的上下键就可以选择默认还是手动设置。如果选择 default,一直回车下去就可以了。这里选择手动 (Manually)。
然后会出现选择配置界面:
注意:使用键盘的上下方向键可以上下选择切换,空格键是选中或者取消,a 是全选
各选项简介:
- TypeScript:支持使用 TypeScript 进行编码。
- Progressive Web App (PWA) Support:PWA 支持。
- Router:支持 vue-router。
- Vuex:支持 Vuex 状态管理。
- CSS Pre-processors:支持 CSS 预处理器。
- Linter / Formatter:支持代码风格检查和格式化。
- Unit Testing:支持单元测试。
- E2E Testing:支持 E2E 测试。
选择好以后直接回车,进入路由配置选择界面:
注意:Y 表示使用 history 模式,N 表示使用 hash 模式 (即 URL 地址里面带有 #)
选择好以后继续回车,然后选择 CSS 预处理器,这里选择 Less 模式:
继续回车,选择标准配置作为代码检查:
继续回车,样式检查选择保存的时候进行检查:
继续回车,选择 Jest 作为单元测试:
继续回车,这里选择 Chrome:
继续回车,会让你选择配置文件是在独立的文件中还是集成到 package.json 中,这里选择独立文件:
继续回车,会让你选择是否保存这次的配置方案以便以后使用,这里选择不保存:
选择好配置以后就开始创建项目了:
创建完成界面如下:
根据提示,进入项目文件里面,输入 npm run serve 命令启动项目:
项目启动成功界面如下:
在浏览器里面输入 http://localhost:8080/ 就可以浏览项目了:
4、使用 Vue UI 可视化界面创建项目
上面的例子中使用的是命令行创建的项目,下面在使用可视化界面创建。在 Vue Cli3 中提供了可视化界面来创建 Vue 项目。
注意:使用可视化界面创建项目的时候,使用 Git Bash、CMD 或者 Power Shell 都可以。
输入下面的命令,会启动 vue ui 可视化界面,然后创建项目
$ vue ui
然后就可以在浏览器里面看到可视化界面了:
可视化界面主要分为下面几个部分:
- 项目:该面板会列出所有的 Vue 项目。
- 创建:使用该面板可以创建新的 Vue 项目。
- 导入:可以导入 Vue 项目。
下面开始创建一个新的 Vue 项目。选择“创建”,然后点击下面的“在此创建新项目”按钮,如图所示:
在上方的地址栏中,还可以帮助我们选择根目录、新建文件夹、收藏文件夹功能。点击“在此创建新项目”进入详情页面
这里要求输入项目名称,选择包管理器,还有若目标文件夹已存在则覆盖功能,以及常用的 git init。这里选择 npm 作为包管理器,如图所示:
然后点击“下一步”进入“预设”界面:
在“预设”界面,这里采用了约定大于配置的思想,使用了预设的功能。我看既可以一键创建一个新的 Vue 项目,也可以采用自定义的方式,甚至支持 git 的远程预设。这里选择“手动配置项目”选项,如图所示:
然后点击“下一步”进入功能界面:
在功能界面选择一些需要安装的插件,一些插件介绍如下:
- Babel:将 ES6、ES7 等代码转换成 ES3 等低级别的浏览器可以支持的代码。
- TypeScript:添加对 TypeScript 的支持。
- PWA:移动支持应用。
- Router:Vue 的路由功能。
- Vuex:Vue 官方的状态管理工具。
- CSS Pre-processors:CSS 预处理器。
- Linter:ESLint,进行代码检测。
- 使用配置文件:使用配置文件。
在这里,我们可以自定义的选择我们需要用到的功能。除了项目中可能用到的 vuex、vue-router 这种业务相关的功能外,我们还能选择 CSS 预处理、ESLint、TypeScript 等这种项目相关的功能,能够帮助我们减少很多复杂的配置。以 CSS 预处理为例,我们不需要再去配置 less-loader、sass-loader、stylus-loader。
这里选择 Router、Vuex、Linter 等进行安装,其它功能也可以在项目创建完成以后再进行安装。然后点击“下一步”进入配置界面
这一步,我们需要进行配置:
- 是否使用类样式语法。
- 为 TypeScript 自动选择 polyfill。
- 使用 history 路由还是 hash 路由(默认使用 hash 路由,如果使用 history 路由则需要服务端做相应配置)。
- 选择使用的 CSS 预处理语言:SCSS/SASS、LESS、STYLUS。这里选择使用 LESS。
- 选择代码检查或者格式化的配置:TSLint、ESLint。这里选择 ESLint。
- 代码检查时机:Lint on save:保存代码的时候检测代码是否有错误。Lint and fix on commit:提交代码的时候检测代码是否有错误。这两个需要哪个勾选哪个,可以都勾选,也可以都不勾选。
配置完成以后,点击“创建项目”,然后会弹出一个对话框,询问是否保存这次的配置,以便下次创建项目的时候使用该次配置,这里选择不保存,如图所示:
然后就会开始创建项目,请耐心等待。创建过程中,会添加需要的模块,并自动运行 Vue:
等待安装完成以后,会自动跳转到项目管理页这个页面,如下图所示:
5、导入项目
上面我们使用可视化界面创建了项目,除了可以直接创建项目以后,还可以导入已经存在的项目。
在 Vue 项目管理器界面选择导入项目,然后选择项目所在的文件夹,最后点击“导入这个文件夹”按钮即可将项目导入,如下图所示:
这样就可以导入项目了。
二、项目管理
在上面的步骤中,我们创建了一个 vue 项目,创建完成以后,会自动跳转到项目管理页面。该页面主要是跟 packages.json 相关的配置。
在该页面可以安装 vue 的调试工具,返回创建新项目,如下图所示:
1、项目仪表盘
默认打开的就是项目仪表盘页面,这里是一些使用介绍,如下图所示:
1、插件
选择左侧列表的“插件”,会切换到插件页面,该页面显示了项目中安装的插件,这里大多数是全局插件。在右上角的搜索框里面可以搜索需要安装的插件,然后点击“添加插件”就可以安装插了,如下图所示:
2、依赖
点击左侧列表的“依赖”,可以切换到依赖界面。在这里,我们可以很方便的管理项目相关的依赖,可以安装新的依赖,也可以删除依赖。点击“查看详情”,查看依赖的具体说明,如下图所示:
3、配置
点击左侧列表的“配置”,可以切换到配置界面。这里的配置页,基本上是以前的 config 文件夹的相关内容。如下图所示:
主要有下面一些设置:
- 公共路径:应用的根目录。
- 输出目录:build 生成的目录。
- 资源目录:静态资源存放的目录。
- 启用运行时编译:允许在组件中使用 template,但是会因此让 app 多 10kb 负载。
- Enable Production Source Map:在生产环境使用 js Source Map 便于调试,但是会影响 build 的速度。
- 并行编译:多线程并行编译 Babel 或者 TypeScript。
- 启用 CSS Modules:默认只有以 *.module.[ext]结尾的文件才会被视为 CSS 模块。开启此项,允许你在文件名中删除 module 并将所有的样式文件 (css|scss|sass|less|styl(us)?) 视为 CSS 模块。
- 抽取 CSS:是否将 CSS 导出为一个 CSS 文件,而不是写在 js 中內联,并动态注入。在构建为 web 组件时,默认情况下也会禁用此选择 (样式內联并注入 shadowRoot)。构建库时,您也可以将其设置为 false,以避免用户自己导入 CSS。
- 启用 CSS Source Maps:为 CSS 启用 Source map,会影响构建性能。
点击“更多信息”,可以查看相关的帮助和详情。
4、任务
点击左侧列表“任务”,可以切换到任务界面
server 开发环境
这里对应的任务,对应于 package.json 中的 script 脚本。
输出界面可以显示一些编译的信息
控制台能很方便的看到单页应用运行的信息,包括错误数、警告数、静态资源大小、模块大小、依赖大小。在控制台选项,点击“启动 app”就可以运行项目,相当于以前的 npm run dev 命令。
分析界面能帮助我们分析代码和模块的大小。一般在生产模式下,才会考虑这个问题:
build 生产环境
各个功能和 server 中的类似,在分析界面可以很明显的看到编译后的文件和未编译文件在大小上的差距。
lint
在该界面可以进行代码检测。
inspect 审查
在这个模式下,我们可以看到详细的 webpack 配置。
点击运行旁边的“变量”按钮,可以选择开发环境、生产环境、测试环境。默认是生产环境。
三、启动顺序
项目创建完成以后,在浏览器里面输入下面的 URL 地址:http://localhost:8080/#/,Vue 项目就可以启动了,启动后的界面如下:
有没有人思考过这样一个问题:Vue 项目的启动顺序是如何呢?我们使用 VS Code 打开创建的项目:
Vue 项目代码整体结构如下:
网页启动的时候首先是启动一个 HTML 页面,我们发现在 public 文件夹下面有一个 index.html 文件,打开该文件:
我们发现 index.html 中的 title 标题和启动以后页面显示的标题一致,我们猜想:是不是首先启动的 index.html 页面呢?我们修改一下 titie 标题的值:
然后在看一下页面的 titie 值:
我们发现:页面显示的 title 值和 index.html 代码里面 title 的值一致,所以我们确定 Vue 项目启动的时候,首先显示 index.html 页面。
这时候又有人会提出疑问:index.html 页面里面只有一个 div 标签,而启动页面下面显示了很多内容,下面的内容是从哪里来的呢?
四、总结
vue ui 提供了一套完整的 vue 项目构建的页面。既保留了 vue-cli 的即开即用的便利性,同时也保证了 webpack 配置的自由度。
对应使用 vue 的开发者来说,使用 vue ui 创建项目,非常友好,整个功能从构建到管理得到了优化。