Vue项目创建流程

Vue项目创建

Vue是现今比较潮流的前端开发语言，这里码一下搭建前端Vue项目的一些流程以及命令。

VS Code以及Node.js的基本安装暂时就不介绍了。

Node相关配置

1、在Node.js的安装文件夹中，原有一个文件夹：node_modules，在此新建两个文件夹：node_cache和node_global。

2、在该文件夹下，打开命令面板，输入指令：设置缓存文件夹和全局依赖存放路径。

npm config set cache "D:\APP\Node\node_cache"

npm config set prefix "D:\APP\Node\node_global"

 3、设置国内(淘宝)镜像仓库。

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

4、安装vue。

npm install vue -g

 5、安装vue-cli。

npm install vue-cli -g

Vue项目创建

在操作之前，需要先配置一下系统环境变量Path:D:\APP\Node\node_global，不然无法使用以下vue指令。

1、新建文件夹，并打开命令面板，初始化项目。(注意项目取名不可含有大写字母)

vue init webpack "frontvuedemo"

2、接下来会有选择，是：Enter键和Y/y，否：N/n。(可根据自我需求调整)

• Project name (frontvuedemo) —— 项目名 —— Y

• Project description ( A Vue.js project ) —— 项目介绍 —— Y

• Author —— 作者 —— 可写完Author后Y

• Vue build —— 项目构建 —— Y

• Install vue-router? —— 是否安装路由 ——Y

• Use ESLint to lint your code? —— 是否安装ESLint —— N

• Set up unit tests —— 是否设置单元测试 —— N

• Setup e2e tests with Nighwatch —— 是否设置e2e测试 —— N

• Should we run `npm install` for you after the project has been created —— 是否项目创建后执行npm install —— Yes, use npm

3、项目搭建完成，切换进项目文件夹，执行运行指令。

npm run dev

4、运行成功。

命令执行

本文命令可以cmd、powershell、git bash、vs code终端等命令面板执行，不过需要注意配置系统全局环境变量。

附上版本查看检验指令：

node -v

vue -V