vue项目的启动
第一步:安装node.js环境
测试是否安装成功:使用node -v查看是否安装成功:
在项目的根目录下执行node -v命令:
第二步:搭建vue开发环境,安装vue的命令行工具(CLI)
npm install --global vue-cli
安装之前确保已经安装了node 和npm
安装完vue-cli之后需要配置npm的环境变量到path中:
C:\Users\hongcaixia\AppData\Roaming\npm
注意:有一些电脑会隐藏掉部分文件,所以直接输入此路径
使用vue -V命令查看是否配置成功
使用vue-cli创建一个标准的vue项目:
方式一:vue init webpack todolist
方式二:vue init webpack-simple vue-demo01
此种方式对比上一种更项目目录更简洁
第三步:安装环境运行需要的包:
方式一:使用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
使用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项目的目录结构
安装elementUI页面组件插件:
npm方式:
yarn方式:yarn add element-ui