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程序 参考自:yarnpkg.com/zh-Hant/doc…
检测是否安装成功: 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