前后端分离 - 前端起步
前端起步
- Vue
- Vue CLI 3.x
- Ant-Design-Vue
针对的是不太熟悉前端的后端人员
所以一些前端高级的东西没有用到,也没有研究。
先查看自己的 Vue 版本
adminqiandeMacBook-Pro:demo02 adminqian$ Vue -V
3.5.1
初始化项目
系统:Mac 系统(Windows 系统大同小异)
在 终端(或 控制台)初始化 Vue 项目
(先找到合适的目录,我的目录是 demo02)
adminqiandeMacBook-Pro:demo02 adminqian$ vue create my-project
显示如下:
Vue CLI v3.5.1
┌────────────────────────────┐
│ Update available: 3.11.0 │
└────────────────────────────┘
? Please pick a preset:
my (vue-router, vuex, babel, eslint)
default (babel, eslint)
❯ Manually select features
通过上下箭头,选择自己选择项目特性,回车。
Vue CLI v3.5.1
┌────────────────────────────┐
│ Update available: 3.11.0 │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project:
◉ Babel
◯ TypeScript
◯ Progressive Web App (PWA) Support
◉ Router
❯◉ Vuex
◯ CSS Pre-processors
◉ Linter / Formatter
◯ Unit Testing
◯ E2E Testing
上下箭头,空格选中自己要添加的特性
前端不是很专业,就选择了和 Vue 相关的 Router 和 Vuex,Babel 在后面引入 ant-design-vue 的时候要用到。
选择完毕后,回车。
Vue CLI v3.5.1
┌────────────────────────────┐
│ Update available: 3.11.0 │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) (Y/n) y
Vue router 是否启用历史。输入 y,回车。
Vue CLI v3.5.1
┌────────────────────────────┐
│ Update available: 3.11.0 │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: (Use arrow keys)
❯ ESLint with error prevention only
ESLint + Airbnb config
ESLint + Standard config
ESLint + Prettier
默认即可。
Vue CLI v3.5.1
┌────────────────────────────┐
│ Update available: 3.11.0 │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
w keys)
❯ In dedicated config files
In package.json
同样默认回车。默认的是 配置文件在不同的文件中保存。
Vue CLI v3.5.1
┌────────────────────────────┐
│ Update available: 3.11.0 │
└────────────────────────────┘
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, Linter
? Use history mode for router? (Requires proper server setup for index fallback
in production) Yes
? Pick a linter / formatter config: Basic
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedica
ted config files
? Save this as a preset for future projects? (y/N) n
最后一个是问是否将刚才的选择保存起来,下次新建项目的时候直接使用,我这里选择的是不保存。
回车完成。
项目初始化完成之后。按下面的方法就可以启动项目了。
$ cd my-project
$ npm run serve
adminqiandeMacBook-Pro:demo02 adminqian$ cd my-project/
adminqiandeMacBook-Pro:my-project adminqian$ npm run serve
启动后,控制台显示如下:
DONE Compiled successfully in 4049ms 22:13:58
App running at:
- Local: http://localhost:8080/
- Network: http://192.168.0.2:8080/
Note that the development build is not optimized.
To create a production build, run npm run build.
之后,在浏览器访问 http://localhost:8080/ 即可。
初始化后项目中的 package.json 内容如下:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"eslint-plugin-vue": "^5.0.0",
"vue-template-compiler": "^2.6.10"
}
}
在 dependencies 和 devDependencies 中可以看到我们初始化项目时候所选择的特性。
问题
不同的 Vue CLI 版本创建项目时的选项可能有所不同,但大同小异。
Q: 启动项目提示 Error: Watching remote files is not supported
执行命令npm install webpack-dev-server@3.7.2 --save-dev
引入 ant-design-vue
Ctrl + C 暂停项目的运行
安装 ant-design-vue
npm install ant-design-vue --save
npm install babel-plugin-import --save-dev
npm install less@2.7.3 --save-dev
npm install less-loader@4.1.0 --save-dev
babel-plugin-import 是按需引入 ant-design-vue 所需要的
less 和 less-loader 不安装,项目会启动不起来。且版本不能太高,否则会报错。
修改 babel.config.js 文件
module.exports = {
presets: [
'@vue/app'
],
plugins: [
[
"import",
{ libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
]
]
}
至此, ant-design-vue 的引入完成。
此时 package.json 内容如下:
{
"name": "my-project",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"ant-design-vue": "^1.3.16",
"core-js": "^2.6.5",
"vue": "^2.6.10",
"vue-router": "^3.0.3",
"vuex": "^3.0.1"
},
"devDependencies": {
"@vue/cli-plugin-babel": "^3.11.0",
"@vue/cli-plugin-eslint": "^3.11.0",
"@vue/cli-service": "^3.11.0",
"babel-eslint": "^10.0.1",
"eslint": "^5.16.0",
"babel-plugin-import": "^1.12.1",
"eslint-plugin-vue": "^5.0.0",
"less": "^2.7.3",
"less-loader": "^4.1.0",
"vue-template-compiler": "^2.6.10"
}
}
测试 ant-design-vue
我们展示一个 Button
修改 Home.vue 文件
<template>
<div class="home">
<a-button type='primary'>Click me</a-button>
</div>
</template>
<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
gl>import Vue from 'vue'
gl>import {Button} from 'ant-design-vue'
gl>Vue.use(Button)
export default {
name: 'home',
components: {
HelloWorld
}
}
</script>
效果如图:
*昵称:
*邮箱:
个人站点:
*想说的话: