习惯使用cmd加载ui界面创建的话可执行:
1.cmd
2.vue ui
一、准备条件
nodejs、npm、vue、yarn等相关下载安装在此不做说明
1.npm查询
npm -v 或者 npm-V
2.vue查询
vue -V 版本在vuecli.3.0之下可以 vue -v
二、创建
1.用IntelliJ IDEA新建一个空项目my_project用来存放我们的所有项目
File——New——Project……
2.点击Next,给文件夹起名my_project,在E盘之下,点击Finish,如果提示是否创建该文件夹,点击OK
3.点击底部工具Terminal(如果没有在工具菜单里打开)
4.创建名为first的项目名(后面的选项使用空格为选中,上下可切换,回车为确定)
vue create first
关于那些参数
1-
default (babel, eslint)默认套餐
Manually select features自己去选择需要的功能,提供更多的特性选择 (我选了)
2-
Babel (我选了)
TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。(我选了)
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS 预处理器。(我选了)
Linter / Formatter 支持代码风格检查和格式化。(我选了)
Unit Testing 支持单元测试。
E2E Testing 支持 E2E 测试。
3-
css选择SCSS/SASS
Less (我选了)
Linter / Formatter选择prettier
4-
Save this as a preset for future projects?这个就是问要不要把当前的这一系列选项配置保存起来,方便下一次创建项目时复用。选择y
5.等待编译结果
6.按照提示切换、启动项目
cd first
npm run serve
7.根据提示,使用http://localhost:8080访问项目页面
8.使用idea打开我们创建的项目first,查看项目结构
File——Open
只为自己熟记这个过程,作为后端人员,开始学习vue了,大家多多指正
三、常用插件库安装
1.安装yarn
yarn install
2.安装element-ui
npm install element-ui -save
3.安装vuex
yarn add vuex
4.安装vant
yarn add vant
5.安装babel-plugin-import
yarn add babel-plugin-import
6.安装axios
yarn add axios
7.安装Markdown编辑器
yarn add mavon-editor
8.安装用于解析Markdown文档(淘宝镜像)
cnpm install markdown-it --save
9.安装用于解析Markdown样式(淘宝镜像)
cnpm install github-markdown-css