图形化方式利用脚手架创建Vue项目
1 安装node.js（附带安装npm）安装v14.3.0版本
查看安装版本
node -v
2 安装cnpm
npm install -g cnpm
查看安装版本
cnpm -v
以管理员身份运行powershell，运行
set-ExecutionPolicy RemoteSigned
3 安装yarn
cnpm install -g yarn
查看安装是否成功
yarn -v
4 安装vue-vli脚手架
cnpm install -g @vue/cli
查看vue-cli是否安装成功
vue -V
5 安裝 element ui
cnpm i element-ui -S
6 安装axios
cnpm i axios -S
7 安装mock
cnpm i mockjs -S
8 安装echarts
cnpm i echarts -S
按需引入
cnpm install babel-plugin-component -D
创建项目
vue create vue_cli
方向键选择manually select feature，回车
按空格键选择Babel、PWA、Router、Vuex、CSS，回车
回车，CSS选择Sass/SCSS(with node-sass)，回车
默认，选择配置文件方式 In dedicated config files，回车
选择是否保存预设，y然后取名 aaa 回车
选择Use Yarn，回车
启动项目
cd vue_cli
yarn serve
按住ctrl键在浏览器打开项目网址：http://localhost:8081/
出现Vue图标界面，则项目创建成功！
1 win+R打开cmd窗口，输入命令
vue ui
2点击创建，进入项目创建面板。选择路径，点击在此创建项目
3 输入项目名称,点击下一步
4 选择手动，点击下一步
5 选择Babel、Router、Linter/Formatter和使用配置文件，点击下一步
6 选择ESLint+Standard config，点击创建项目
7 选择是否保存为预设模板
8 项目创建中…
9 创建完成
10 选择任务/serve，点击运行，等待编译成功，点击启动app
11 项目创建成功，跳转首页
12 安装Element UI
点击插件，添加插件
13 搜索 vue-cli-plugin-element，单击并安装
14 选择import on demand，点击完成安装s
15 点击继续，完成安装
16 重新启动项目，出现el-button，则安装成功
删除无用组件
1 删除component下的HelloWorld.vue
2 删除App.vue中template标签中div中全部内容
删除导入HelloWorld.vue语句
export default 中只留下name属性
删除style标签中内容
3 删除views文件夹
4 router中的index.js删除Home.vue导入语句
删除const routes中内容
配置VS Code
安装Live Server插件
自动保存 常用设置/选择OnFocusChange
安裝Vue 3 Snippets插件
安装Vue helper插件
安装 Element UI Snippets插件
s文件夹
4 router中的index.js删除Home.vue导入语句
删除const routes中内容
配置VS Code
安装Live Server插件
自动保存 常用设置/选择OnFocusChange
安裝Vue 3 Snippets插件
安装Vue helper插件
安装 Element UI Snippets插件
rimraf node_modules
