检查环境 node 和 npm
E:\VueProject\XXXX-ui>node -v
v12.13.1
E:\VueProject\XXXX-ui>npm -v
6.14.7
搭建vue项目环境
查看所有全局安装的模块
E:\VueProject\xxxxxx>npm list -g
C:\Users\Administrator\AppData\Roaming\npm
+-- @vue/cli@4.5.6
| +-- @types/ejs@2.7.0
| +-- @types/inquirer@6.5.0
| | +-- @types/through@0.0.30
全局安装vue-cli
E:\VueProject\xxxxxx>npm install --global vue-cli
进入项目目录,创建一个基于 webpack 模板的新项目
vue init webpack 项目名
E:\VueProject\wenhua-ui>vue init webpack xxxxxx-ui
? Project name 工程名
? Project description 描述
? Author xxxxxx <xxxxxxxx@qq.com> 作者
? Vue build standalone
? Install vue-router? Yes 是否安装 vue-router
? Use ESLint to lint your code? Yes 是否安装 ESLint(可组装JavaScript和JSX检查工具)
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner noTest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "xxxxxxx-ui".
# Installing project dependencies ...
# ========================
等待下载依赖…
下载完后目录是这样
安装依赖
安装依赖
npm install
建议不要直接使用 cnpm 安装依赖,会有各种诡异的 bug。可以通过如下操作解决 npm 下载速度慢的问题
npm install --registry=https://registry.npm.taobao.org
耐心等待安装依赖,安装完成后
运行项目
E:\VueProject\wenhua-ui\wenhua-ui>npm run dev
......
I Your application is running here: http://localhost:8080
成功运行!
开始写你的代码吧!