2020最新vue项目搭建详解|小白必看-山西软通乐学常亮

山西软通乐学常亮：下面由我给大家详解讲解vue项目搭建步骤

第一步：安装node（11版本自带npm工具）

在node.js官网下载

安装好查看命令

node -v  查看电脑安装node版本

npm -v 查看电脑安装npm版本

---

第二步：安装cnpm（国内管理工具）与npm的区别就是下载速度快

npm install cnpm -g --registry=https://registry.npm.taobao.org

cnpm -v 查看电脑安装cnpm版本

 

---

第三步：安装vue项目框架（脚手架搭建）

npm install -g @vue/cli

vue --version 查看电脑安装vue框架版本

---

 

第四步：创建vue项目工程

[if !supportLists]1. [endif]vue create 项目名 （命令行创建）

 

选择Manually select features（手动选择功能）要自定义安装哪些功能和配置

Check the features needed for your project: （检查项目所需的功能）

咱们这里需要到的功能有babel（javascript编译器）、 router（路由）、vuex（状态管理模式）、css pre-processors（CSS预处理器）。

空格选择

babel（javascript编译器）：利用babel就可以让我们在当前的项目中随意的使用这些新最新的es6，甚至es7的语法。说白了就是把各种javascript千奇百怪的语言统统专为浏览器可以认识的语言。

router（路由）：ue-router是vue.js官方路由管理器。vue的单页应用是基于路由和组件的，路由用于设定访问路径，并将路径和组件映射起来。（传统页面切换是用超链接a标签进行切换）。

css pre-processors（CSS预处理器）：预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。

 

回车

路由器是否使用历史模式

选择一个CSS预处理器

您更喜欢将你选择的功能等配置文件放在哪里？选择第一个单独的每个文件夹

是否将其保存为将来项目的预设？

 

重重敲击回车等待项目安装成功。。。

安装成功项目结构

最后一步进入创建好的项目输入命令 npm run serve

创建成功点击链接访问项目

 

---

vue ui 可视化创建 （可视化图形界面创建）

第一步：命令vue ui 生成一个地址

---

第二步：点击生成的地址进入可视化界面

---

第三步：点击创建

---

第四步：点击在此创建新项目

---

第五步：点击下一步选择手动

---

第六步：选择需要安装的功能

---

第七步：选择是否使用历史路由和CSS预处理器

---

第八步：选择取消保存预设等待创建项目

---

最后一步：点击任务点击serve 点击运行 这个项目就跑起来了