1.安装node
node -v查询版本号

2.安装vue
官方镜像
npm install -g @vue/cli
可能中途会卡住
推荐淘宝镜像
npm install -g cnpm --registry=https://registry.npm.taobao.org

然后安装最新版
cnpm i -g vue @vue/cli

3.新建vue项目
vue create vue-project
4.vue/cli 4.3.1的配置参考下面,选择需要的功能。
https://www.cnblogs.com/jasonLiu2018/p/11986917.html
5.结束
cd vue-project
npm run dev

可能出现vue : 无法加载文件,下面方法解决。
1. 以管理员身份运行PowerShell
2.执行:get-ExecutionPolicy,回复Restricted,表示状态是禁止的
3.执行:set-ExecutionPolicy RemoteSigned
4.选择Y
6.加路由
npm install vue-router --save-dev
6.1 在App.vue 中添加 <router-link to="/demo1">Demo1</router-link>

6.2 创建 demo1.vue
<template>
<div class="test">
<h1>This is an Demo1 page</h1>
</div>
</template>
<script>
</script>
<style lang="">
</style>

6.3 /src/router/index.js中添加一路由

启动项目,打开 http://localhost:8080/#/demo1

加element-UI。
npm i element-ui -S
在main.js文件中 引入 element 组件 :
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)
下图主要按钮表示成功了。

网友评论