Vue——脚手架Vue CLI的使用

小鱼儿 2024-03-16 11:15 38阅读 0赞

### Vue CLI ###

CLI是Command-Line Interface, 翻译为命令行界面, 但是俗称脚手架. Vue CLI是一个官方发布 vue.js 项目脚手架 使用 vue-cli 可以快速搭建Vue开发环境以及对应的webpack配置.

### Vue CLI的使用 ###

##### 安装Node #####

1.  安装NodeJS 可以直接在官方网站中下载安装. 网址: http://nodejs.cn/download/
2.  检测安装的版本 默认情况下自动安装Node和NPM Node环境要求8.9以上或者更高版本
3.  什么是NPM呢? NPM的全称是Node Package Manager,是一个NodeJS包管理和分发工具，已经成为了非官方的发布Node模块（包）的标准。
4.  cnpm安装 由于国内直接使用 npm 的官方镜像是非常慢的，这里推荐使用淘宝 NPM 镜像。 你可以使用淘宝定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的 `npm: npm install -g cnpm --registry=https://registry.npm.taobao.org` 这样就可以使用 cnpm 命令来安装模块了： `cnpm install [name]`

##### 安装Webpack #####

Vue.js官方脚手架工具就使用了webpack模板 对所有的资源会压缩等优化操作 它在开发过程中提供了一套完整的功能，能够使得我们开发过程中变得高效。 Webpack的全局安装`npm install webpack -g`

##### 安装Vue CLI #####

npm install -g @vue/cli

注意：上面安装的是Vue CLI3的版本，如果需要想按照Vue CLI2的方式初始化项目时不可以的。

如果需要CLI2版本，则需要安装一个桥接工具：

npm install -g @vue/cli-init

##### 脚手架初始化 #####

CLI2初始化：

vue init webpack [project-name]

CLI3初始化：

vue create [project-name]

##### 运行项目 #####

//cli2
    npm run dev
    
    //cli3
    npm run serve
    
    //具体命令要看package.json中的scripts配置

##### 打包 #####

npm run build
    //具体命令要看package.json中的scripts配置

### Vue CLI2详解 ###

##### 初始化项目 #####

vue init webpack [project-name]

![在这里插入图片描述][488aaca5309b4241a7b7be942bc8e6c2.png]

*  project name：项目名称，会根据该名称创建一个文件夹，不能包含大写字母
 *  project description：项目描述
 *  author：作者信息，默认从git读取
 *  vue build：Runtime-Compiler和Runtime-only
 *  install vue-router：是否自动安装路由组件
 *  ESL：ESL int代码规范监测
 *  set up unit tests：单元测试
 *  e2e tests：end to end（端到端）的Nightwatch自动化测试框架
 *  npm install：自动运行npm install构建

##### 目录结构 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]

<table> 
 <thead> 
  <tr> 
   <th align="center">目录/文件</th> 
   <th align="left">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">build</td> 
   <td align="left">项目构建(webpack)相关代码</td> 
  </tr> 
  <tr> 
   <td align="center">config</td> 
   <td align="left">配置目录，包括端口号等。我们初学可以使用默认的。</td> 
  </tr> 
  <tr> 
   <td align="center">node_modules</td> 
   <td align="left">npm 加载的项目依赖模块</td> 
  </tr> 
  <tr> 
   <td align="center">src</td> 
   <td align="left">这里是我们要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：<br> assets: 放置一些图片，如logo等。<br>components: 目录里面放了一个组件文件，可以不用。<br>App.vue: 项目入口文件，我们也可以直接将组件写这里，而不使用 components 目录<br>main.js: 项目的核心文件</td> 
  </tr> 
  <tr> 
   <td align="center">static</td> 
   <td align="left">静态资源目录，如图片、字体等。</td> 
  </tr> 
  <tr> 
   <td align="center">test</td> 
   <td align="left">初始测试目录，可删除</td> 
  </tr> 
  <tr> 
   <td align="center">.xxxx文件</td> 
   <td align="left">这些是一些配置文件，包括语法配置，git配置等。</td> 
  </tr> 
  <tr> 
   <td align="center">index.html</td> 
   <td align="left">首页入口文件，你可以添加一些 meta 信息或统计代码啥的。</td> 
  </tr> 
  <tr> 
   <td align="center">package.json</td> 
   <td align="left">项目配置文件。</td> 
  </tr> 
  <tr> 
   <td align="center">README.md</td> 
   <td align="left">项目的说明文档，markdown 格式</td> 
  </tr> 
 </tbody> 
</table>

##### assets文件夹和static文件夹的区别: #####

assets里的文件编译过程中会被webpack处理理解为模块依赖，只支持相对路径的形式。assets放可能会变动的文件； static里的文件不会被webpack解析，会直接被复制到最终的打包(默认是dist/static)下，必须使用绝对路径引用这些文件。static放不会变动的文件。

##### ESLint规范 #####

它真的很严格,你少一个空格它都会提示你有规范错误,所以是为强迫症准备的,我就不安装它了,不安装也不影响后期开发的(但也有公司需要用它)…

如果在Vue CLI初始化时你手滑安装了它,可以在config文件夹中index.js文件中找到useEslint变量,将它修改为false就行了

##### Runtime-Compiler和Runtime-only的区别 #####

runtime-only: 代码中,不可以有任何的template  
runtime-complier: 代码中,可以有template,因为有complier可以用于编译template

[488aaca5309b4241a7b7be942bc8e6c2.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/6bfd2584574d4e8ca5b3ee220bbb2262.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2NvbGRfX19wbGF5_size_16_color_FFFFFF_t_70]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/16/fa1f62d84d054f97b28358bc9419e4ea.png