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

6,305 阅读2分钟

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程序 参考自:yarnpkg.com/zh-Hant/doc…

检测是否安装成功: 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