VueCli脚手架的使用详解

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  项目名称

注意：

1. vuecli创建项目时，项目名称必须是一个新目录，创建完毕后会自动生成，并在其中生成项目需要的文件。
2. 项目上级各个目录名字最好为英文 或 数字 或 中横线 ，不要使用中文的或其他特殊符号定义的上级目录名字。

创建项目

应用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脚手架创建的项目运行起来。

步骤：

1. 修改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')
   

2. 修改public/index.html文件，使用Vue实例的data数据

   <div id="app">
       {{ msg }}
   div>
   

3. 修改vue.config.js文件内容如下

   module.exports = {
       lintOnSave: false,
       devServer:{
           open:true, // 项目运行自动开启浏览器
           port:16699 // 给项目运行创建web服务的端口号码(1~65535之间)
       }
   }
   

   当前项目运行的时候会创建一个http服务，上述16699就是服务器的端口号码，

   open:true 项目运行的时候，会自动打开浏览器并呈现效果

4. 在项目根目录下(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"
     },
   }
   

   现在项目可以运行了，并且有实时加载的效果，业务文件随时改变，浏览器随时查看到对应效果。