图形化方式利用脚手架创建Vue项目

图形化方式利用脚手架创建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