VueCli脚手架的使用详解
介绍
VueCLI 脚手架,可以把许多项目通用的依赖包(vue、webpack、路由、vuex、less编译器等等) 和 通用的配置都给安装配置好,使得开发者可以把全部的注意力都集中在业务层面,明显提升开发效率,真实项目都要使用脚手架开发。
依赖包:axios、vue等等都是依赖包,一个依赖包中有许多模块。
安装
安装vuecli
:
npm i -g @vue/cli # 全局安装
上述依赖包通过全局方式安装,安装完毕后在系统任何目录都可以执行一个名称为vue
的指令。
依赖包安装完毕,会形成 在 C:\Users\ssh\AppData\Roaming\npm\node_modules@vue\cli 的目录。
查看脚手架版本
:
vue --version # 默认是4.0.5版本(如果是2.9.6就是错误的,需要卸载重新安装)
卸载脚手架
:
npm un -g @vue/cli
vuecli创建项目
:
vue create 项目名称
注意
:
- vuecli创建项目时,项目名称必须是一个新目录,创建完毕后会自动生成,并在其中生成项目需要的文件。
- 项目上级各个目录名字最好为英文 或 数字 或 中横线 ,不要使用中文的或其他特殊符号定义的上级目录名字。
创建项目
应用vuecli脚手架创建项目
步骤
:
运行以下命令来创建一个新项目,位置随意,但是各个上级目录最好都是英文的,vue-project是项目名称,也是项目目录,不要提前创建。
vue create vue-project
选择自定义项目创建配置
具体项目配置
选取less的样式预处理
选择ESLint代码规范
代码ctrl+s保存和git commit 提交时,做eslint代码规范检查工作
对babel、less、eslint、webpack通过独立文件做配置
保存创建项目的配置
保存当前创建项目的具体配置信息
项目创建完成
再次创建项目时,就可以选取之前配置好的项目,一次性完成项目的创建,不用再详细选取配置
上图的20190628具体配置在如下文件,可以直接删除,以便恢复出厂设置:
创建好的项目结构如下:
项目结构文件说明
了解项目的各个文件作用
|-- node_modules // 项目需要的依赖包
|-- public // 静态资源存储目录
| |-- index.html // 项目主容器文件,是div容器所在文件
| |-- favicon.ico // 项目默认索引图片
|-- src
| |-- assets // 放置一些静态资源文件,例如图片、图标、字体
| |-- components // 公共组件目录
| |-- views // 业务组件目录
| |-- App.vue // 顶层根基路由组件
| |-- main.js // 项目主入口文件(包括Vue实例也在这)
|-- .browserslistrc // 哪些浏览器及版本可以运行该项目的说明
|-- .editorconfig // 代码规范配置文件
|-- .eslintrc.js // eslint代码规范检查配置文件
|-- .gitignore // git上传需要忽略的文件格式
|-- babel.config.js // babel配置文件
|-- package.json // 项目基本信息配置文件
|-- package-lock.json // 依赖包版本锁定文件
|-- README.md // 项目普通说明文件
|-- vue.config.js // webpack 配置文件(与webpack.config.js作用一致)
项目运行
把使用vuecli脚手架创建的项目运行起来。
步骤
:
-
修改src/main.js文件为如下内容
import Vue from 'vue' import App from './App.vue' Vue.config.productionTip = false new Vue({ // 创建根实例,在根实例中,让框架第一个显示App.vue render: h => h(App) // function(createElement){return createElement(App)} }).$mount('#app')
-
修改public/index.html文件,使用Vue实例的data数据
<div id="app"> {{ msg }} </div>
-
修改vue.config.js文件内容如下
module.exports = { lintOnSave: false, devServer:{ open:true, // 项目运行自动开启浏览器 port:16699 // 给项目运行创建web服务的端口号码(1~65535之间) } }
当前项目运行的时候会创建一个http服务,上述16699就是服务器的端口号码,
open:true 项目运行的时候,会自动打开浏览器并呈现效果
-
在项目根目录下(vue-project目录下),打开终端,执行命令:
npm run serve
serve:指令标志是package.json文件配置好的。
{ "name": "vue-project", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "vue": "^2.6.11" }, }
现在项目可以运行了,并且有实时加载的效果,业务文件随时改变,浏览器随时查看到对应效果。