⒖ Vue/cli 构建项目

Vue/cli 构建项目

坚持写作vue系列让我自己收获很多，对之前很多理解不透彻的地方又多了一些理解，也试图将自己的理解变成文字分享给更多的人，无奈文字功底有限，有些地方可能表达的不是很清楚，还望各位读者多多包含，同时希望大家能给予指摘改正。

掘金系列地址：https://juejin.cn/user/2963939080275613/posts

前14篇基本上写完了vue2.6版基础的所有内容，下来的几篇将进入vue的生态周边，vue-router以及vuex，当然下来的章节我们将不会单纯的用html页面来构建项目，而是通过@vue-cli以更切近真实项目的方式来构建dome，一窥vue组件化开发的全貌，接下来所有的dome都将以工程化的方式演示！

@vue/cli

有的人可能会好奇为什么vue-cli前边会有个@符号，其实3.x版本之前的版本都叫vue-cli，只是在3.x版本之后可能作者为了区别之前的版本变更名为@vue-cli！

老规矩，我们还是先来了解下@vue-cli是干什么的？

Vue CLI 致力于将 Vue 生态中的工具基础标准化。它确保了各种构建工具能够基于智能的默认配置即可平稳衔接，这样你可以专注在撰写应用上，而不必花好几天去纠结配置的问题。与此同时，它也为每个工具提供了调整配置的灵活性，无需 eject。

那么我们只要知道我们可以通过 @vue/cli 快速搭建出一个完整的交互式项目就可以了！更多描述参考官方解释！

安装vue/cli

安装nodejs & npm

安装@vue/cli需要先安装nodejs和npm，Windows系统安装非常简单，去nodejs官网下载安装包即可！

Windows系统安装nodejs的时候npm也会自动安装！

ubuntu系统安装nodejs

执行检查可更新的软件：

sudo apt-get update

先用普通的apt工具安装低版本的node，然后再升级最新。

sudo apt-get install nodejs
sudo apt install npm

更换淘宝的镜像，这个是必须的，用过的node的人都知道。

sudo npm config set registry https://registry.npm.taobao.org

安装更新版本的工具N，执行：

sudo npm install n -g

更新新node版本，执行：

sudo n stable

Ubuntu 卸载 Node.Js

sudo apt-get remove nodejs

其他系统大家自行解决！

安装@vue/cli

安装命令：

npm install -g @vue/cli
# OR
yarn global add @vue/cli

检查版本：

vue --version

升级：

npm update -g @vue/cli

# 或者
yarn global upgrade --latest @vue/cli

完成以上步骤之后就可以开始创建项目了！

vue/cli创建项目

在本地文件夹中开启终端创建项目！终端运行如下命令：

vue create vueapp

vueapp为你项目的名称。

终端看到这个，按上下箭头键，空格键选中，回车确定，我们这里选最后一个，自定义安装！

按键盘上下箭头键上下切换，空格键选中自己要安装的项，全部选完之后回车即可

• Router (vue的路由插件)
• Vuex (vue的状态管理插件)
• css Pre-processors (css预处理插件)
• Linter (代码检测插件)
• Unit Testing (单点测试模块)
  
  我这里还是以vue2.x为基础创建，vue3.x只是vue2.x的升级版，2.x整明白透彻以后，对比着学习会更快！
  
  这里问我们路由是不是采用 history 模式，我们输入Y即可，选择这个模式之后我们的路由中就不会出现#，显得很好看！
  
  选择CSS预处理器，这里我们选择自己熟悉的一种，我这里选择Less，因为其他的我也不熟悉！
  
  代码检测我们选择ESLint + Prettier模式!
  
  检测代码的时机选择配置：
• Lint on save 保存的时候检测代码
• Lint and fix on commit 提交代码的时候检测
  这里我们全部选中，都需要检测！
  

测试运行器选择Jest!

所有的配置文件是保存在一个package.json文件中还是保存为单独文件，我们选择第一个，所有的配置文件都保存为对应的单独文件！

是不是把我们之前所有的这些步骤起个名字保存起来，以便下次直接选用，就不用再一个一个选择配置，这里我们输入Y，起个名字保存起来即可！

等待安装完成，项目即可安装成功！

感谢您的阅读，如果对您有帮助，欢迎关注"CRMEB"。码云上有我们开源的商城项目，知识付费项目，JAVA版全开源商城系统，学习研究欢迎使用，老铁顺手点个star呗，老板奖励五毛，分你两毛五，关注我们保持联系！