vue环境的搭建与项目创建启动

vue项目的启动

第一步：安装node.js环境

测试是否安装成功：使用node -v查看是否安装成功：
在项目的根目录下执行node -v命令：

执行node -v命令.png

第二步：搭建vue开发环境，安装vue的命令行工具（CLI）

npm install --global vue-cli

vue-cli安装.png

安装之前确保已经安装了node 和npm

image.png

安装完vue-cli之后需要配置npm的环境变量到path中：
C:\Users\hongcaixia\AppData\Roaming\npm

注意：有一些电脑会隐藏掉部分文件，所以直接输入此路径

image.png image.png

使用vue -V命令查看是否配置成功

使用vue-cli创建一个标准的vue项目：
方式一：vue init webpack todolist

使用vue-cli创建一个标准的vue项目.png
image.png

方式二：vue init webpack-simple vue-demo01
此种方式对比上一种更项目目录更简洁

使用webpack-simple.png

第三步：安装环境运行需要的包：

方式一：使用npm命令

npm install

检测是否安装成功：
npm info justreq

注意：npm默认走海外，会很慢，可以使用cnpm（淘宝镜像）

方式二：使用cnpm命令

安装cnpm，输入以下命令：
npm install -g cnpm --registry=https://registry.npm.taobao.org

检测是否安装成功：
cnpm -v

安装依赖包:
cnpm install

方式三：使用yarn命令（推荐）

先安装yarn，此处安装的是exe程序
参考自：https://yarnpkg.com/zh-Hant/docs/install#

检测是否安装成功：
yarn -v

image.png

使用yarn安装依赖的包：
yarn/yarn add/ yarn install
相当于npm install
相当于 cnpm install
yarn会自动维护package.json，会锁定软件包版本(yarn.lock)，会在本地建立软件包仓库

检测是否安装成功依赖包：
yarn info justreq
yarn info xxx:用于检索线上仓库里的包的相关信息

第四步：启动项目

启动方式：查看package.json 的 scripts 字段

使用npm方式：npm run dev
使用yarn方式：yarn dev

vue项目的目录结构

vue项目的目录结构.png

安装elementUI页面组件插件：
npm方式：
yarn方式：yarn add element-ui