新建vue项目
- 首先到node官方网站下载最新版本安装（安装自行百度）
Cmd窗口操作：
- Node安装成功自带了npm。官方文档（https://www.runoob.com/nodejs/nodejs-npm.html）
npm –v 查看npm是否安装。
npm install -g npm 更新命令。
2. 安装淘宝镜像：
为什么需要这个东西呢？因为 npm 的服务器是国外的服务器，我们访问外国服务器很慢。于是淘宝就把 npm 的资料拷贝到了自己的服务器上，就是我们要用到的淘宝镜像。
指令：
npm install -g cnpm --registry=https://registry.npm.taobao.org
3.vue-cli vue脚手架
指令：cnpm install vue-cli -g （淘宝镜像安装好以后之后的“npm”改用“cnpm”）
4.webpack 指令为 cnpm install -g webpack
以上配置均为一次性，初次配置完以后，可以不再配置
二、建项目
Cmd窗口操作：
cd建立项目的根目录
输入命令：
vue init webpack hello-world（hello-world为自定义的项目名,这里一定不能用大写，如果习惯驼峰命名法的人可以用“-”分隔开）接下来基本是一路敲回车了。
建好之后使用webstorm开发工具打开项目。
下载依赖：
建议不要用 cnpm 安装 会有各种诡异的bug 可以通过如下操作解决 npm 下载速度慢的问题 使用下边：（我每次直接npm install 也并不是很慢）
npm install --registry=https://registry.npm.taobao.org
启动：npm run dev 启动成功直接浏览器访问窗口给出的地址。
三、导入element-ui模块
上边完成之后使用 ctrl+c 停止运行项目；
接下来安装cnpm
安装 loader 模块：
cnpm install style-loader -D
cnpm install css-loader -D
cnpm install file-loader -D
安装 Element-UI 模块
cnpm install element-ui --save
修改 webpack.base.conf.js 的配置
配置完之后，可以先查看 element-ui 是否已经调用，打开 package.json
这里有了 “element-ui”：“2.13.0”，说明已经成功，我们开始进行下一步配置。
- 引入element-ui
打开 src/main.js 添加下面三条语句
import ElementUI from ‘element-ui’
import ‘element-ui/lib/theme-chalk/index.css’
Vue.use(ElementUI)
如下图：
②增加 build/webpack.base.conf.js 文件内容
{
test: /\\\\\\\\.css$/,
loader:"style!css"
},
{
test: /\\\\\\\\.(eot|woff|woff2|ttf)([\\\\\\\\?]?.*)$/,
loader:"file"
}
③修改 src/App.vue 代码
<template>
<div id="app">
<el-button type="primary">你好</el-button>
<el-button type="success">你好</el-button>
<el-button type="info">你好</el-button>
<el-button type="warning">你好</el-button>
<el-button type="danger">你好</el-button>
</div>
</template>
启动项目：（如下图说明成功）
具体的项目使用请参照vue-element-admin的官方文档进行开发。
https://panjiachen.gitee.io/vue-element-admin-site/zh/guide/#%E5%8A%9F%E8%83%BD
以上是 新建vue项目 的全部内容， 来源链接： utcz.com/z/377615.html
