如何搭建vue-cli？

mia_kkk
711 阅读53分钟

什么是vue-cli?

cli的全称是command-line interface，也就是命令行界面。意思是可以通过输入一些简单的命令行，帮助你快速的生成一些配置。cli俗称脚手架，因为它就像建筑里面的脚手架一样，帮助搭建好项目的框架。使用vue-cli可以快速搭建vue的开发环境以及对应的webpack配置。


创建vue-cli（vue脚手架）项目

准备工作：

  1. 安装node.js（node -v查看当前版本）-->用于提供npm（npm -v查看当前版本）
  2. npm连接国外服务器，比较慢。可以使用cnpm代替npm。developer.aliyun.com/mirror/NPM?…


创建vue项目（在哪里创建就在哪里打开bash git/powershell/终端）：

安装vue-cil——全局安装只需要安装一次

  1. 2.0版本：cnpm install -g vue-cli
  2. 3.0以上版本：cnpm install -g @vue/cli
  3. 更新（先卸载再安装）：npm uninstall vue-cli -g
  4. 拉取2.0模板：npm install -g @vue/cli-init


vue2.0安装方法：

1. vue init webpack vue-demo（新建/初始化一个名为vue-demo的webpack模板文件,webpack是最全最常用的模板）

2. runtime-only和runtime+compiler的选择（选择runtime-only）

runtime-only的优点：1. 运行更快更高效 2.底层的代码量相对较少，所以小了6KB，更轻便

3. 设置vue文件信息/问题选择yes or no（根据自己的需求选择）

  1. 项目名称/描述/作者根据自己的需求更改
  2. vue router是路由，用于页面之间的跳转
  3. Eslint是纠正JavaScript代码风格的工具
  4. 单元测试（unit tests）：站在程序员的角度测试。把代码看成是一个个的组件，从而实现每一个组件的单独测试，测试内容主要是组件内每一个函数的返回结果是不是和期望值一样。
  5. 端到端测试（e2e tests）：站在用户角度的测试。e2e测试是把程序作为一个黑盒子，我不懂你内部是怎么实现的，我只负责打开浏览器，把测试内容在页面上输入一遍，看是不是我想要得到的结果。

MINGW64 vue init webpack vue-demo project name (vue-demo) project name vue-demo æ/Desktop/web/excerise/vue/vue project 7 7 7 7 7 7 7 7 7 7 7 7 7 ? project description (A Vue.js project) ? project description A Vue.js project Author Author Vue build standalone ? Install vue-router? (Y/n) Y ? Install vue-router? Yes Use ESLint to lint your code? (Y/n) n Use ESLint to lint your code? No Set up unit tests (Y/n) n Set up unit tests No Setup e2e tests with Nightwatch? (Y/n) n Setup e2e tests with Nightwatch? No Should we run •npm install • for you after the project has been created? (recom Should we run •npm install • for you after the project has been created? (recom mended) npm vue-cli • Generated "vue-demo" . # Installing project dependencies .

4. 最后一个问题，选择npm install或者yarn install会自动安装依赖，根据自己使用的来选择， 也可以选择自己安装，cd 切换到对应文件夹，使用cnpm install安装。

5. 运行vue-cli，打开vue网页：npm run dev，运行成功，即安装成功

如果无法自动打开网页，在创建的文件夹vue-demo中找到下面对应的文件夹更改设置，重新运行vue-cli即可。

config > 1 2 3 4 5 6 7 8 9 le 11 12 13 14 15 16 17 18 19 2e 21 22 JS index.js> e] <unknown> > dev 'use strict' // Template version: 1.3.1 // see http://vuejs-templates.github.io/webpack = require('path') path const module. exports = dev : Paths assetsSubDirectory: ' static' , assetsPub1icPath : proxyTab1e: { } ' // Various Dev Server settings host: '0.0.0.0', // can be overwritten by prc // can be overwritten by process. port: 8080, autoOpenBrowser : true, errorOver1ay: true, notifyOnErrors: true, false, // https://webpack.js.org/confiE poll :


vue3.0安装方法：

1. 可视化的方式——vue ui

2. 命令行的方式

    a. vue create 项目名称

    b. 按空格键选择需要的配置

vue CLI v3.2.1 ? please pick a preset: Manually select features ? Check the features needed for your project: Babel Typescript ) Progressive Web Bp (PWA) Support Router vuex CSS Pre-processors Linter / Formatter unit Testing E2E Testing

3. 按照提示进行其他选择

Vue cli3.0以上可以将我们选择的配置保存为一个preset，方便下次直接使用，根据自己的需求选择是否需要保存即可。 

如果想要删除配置（preset），找到c盘>Users>Administrator文件夹中的vuerc文件，用编辑器打开，在preset这里进行删除即可

*大部分全局安装的文件都会在这个文件夹里

注意：vue3.0以上隐藏了配置信息，如果需要自己配置，要手动添加vue.config.js文件（文件名不能修改），在里面编写需要配置的内容。

4. npm run serve运行


vue cli2.0和vue cli3.0的区别

  1. vue3.0实现了可视化搭建vue项目
  2. vue3.0的实现了0配置，隐藏了bulid和config配置文件夹
  3. static文件夹变成了pulic



avatar
文章
阅读
粉丝