首页 友情链接

前后端分离 - 前端起步

时间 2019/9/11 22:00:02 加载中...

前端起步

  • Vue
  • Vue CLI 3.x
  • Ant-Design-Vue

针对的是不太熟悉前端的后端人员
所以一些前端高级的东西没有用到，也没有研究。

先查看自己的 Vue 版本

  1. adminqiandeMacBook-Pro:demo02 adminqian$ Vue -V
  2. 3.5.1

初始化项目

系统：Mac 系统（Windows 系统大同小异）

在 终端（或 控制台）初始化 Vue 项目
（先找到合适的目录，我的目录是 demo02）

  1. adminqiandeMacBook-Pro:demo02 adminqian$ vue create my-project

显示如下：

  1. Vue CLI v3.5.1
  2. ┌────────────────────────────┐
  3. │  Update available: 3.11.0  │
  4. └────────────────────────────┘
  5. ? Please pick a preset: 
  6.   my (vue-router, vuex, babel, eslint) 
  7.   default (babel, eslint) 
  8. ❯ Manually select features

通过上下箭头，选择自己选择项目特性，回车。

  1. Vue CLI v3.5.1
  2. ┌────────────────────────────┐
  3. │  Update available: 3.11.0  │
  4. └────────────────────────────┘
  5. ? Please pick a preset: Manually select features
  6. ? Check the features needed for your project: 
  7.  ◉ Babel
  8.  ◯ TypeScript
  9.  ◯ Progressive Web App (PWA) Support
  10.  ◉ Router
  11. ❯◉ Vuex
  12.  ◯ CSS Pre-processors
  13.  ◉ Linter / Formatter
  14.  ◯ Unit Testing
  15.  ◯ E2E Testing

上下箭头，空格选中自己要添加的特性
前端不是很专业，就选择了和 Vue 相关的 Router 和 Vuex，Babel 在后面引入 ant-design-vue 的时候要用到。

选择完毕后，回车。

  1. Vue CLI v3.5.1
  2. ┌────────────────────────────┐
  3. │  Update available: 3.11.0  │
  4. └────────────────────────────┘
  5. ? Please pick a preset: Manually select features
  6. ? Check the features needed for your project: Babel, Router, Vuex, Linter
  7. ? Use history mode for router? (Requires proper server setup for index fallback 
  8. in production) (Y/n) y

Vue router 是否启用历史。输入 y，回车。

  1. Vue CLI v3.5.1
  2. ┌────────────────────────────┐
  3. │  Update available: 3.11.0  │
  4. └────────────────────────────┘
  5. ? Please pick a preset: Manually select features
  6. ? Check the features needed for your project: Babel, Router, Vuex, Linter
  7. ? Use history mode for router? (Requires proper server setup for index fallback 
  8. in production) Yes
  9. ? Pick a linter / formatter config: (Use arrow keys)
  10. ❯ ESLint with error prevention only 
  11.   ESLint + Airbnb config 
  12.   ESLint + Standard config 
  13.   ESLint + Prettier

默认即可。

  1. Vue CLI v3.5.1
  2. ┌────────────────────────────┐
  3. │  Update available: 3.11.0  │
  4. └────────────────────────────┘
  5. ? Please pick a preset: Manually select features
  6. ? Check the features needed for your project: Babel, Router, Vuex, Linter
  7. ? Use history mode for router? (Requires proper server setup for index fallback 
  8. in production) Yes
  9. ? Pick a linter / formatter config: Basic
  10. ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
  11. > to invert selection)Lint on save
  12. ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? (Use arro
  13. w keys)
  14. ❯ In dedicated config files 
  15.   In package.json

同样默认回车。默认的是 配置文件在不同的文件中保存。

  1. Vue CLI v3.5.1
  2. ┌────────────────────────────┐
  3. │  Update available: 3.11.0  │
  4. └────────────────────────────┘
  5. ? Please pick a preset: Manually select features
  6. ? Check the features needed for your project: Babel, Router, Vuex, Linter
  7. ? Use history mode for router? (Requires proper server setup for index fallback 
  8. in production) Yes
  9. ? Pick a linter / formatter config: Basic
  10. ? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i
  11. > to invert selection)Lint on save
  12. ? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedica
  13. ted config files
  14. ? Save this as a preset for future projects? (y/N) n

最后一个是问是否将刚才的选择保存起来，下次新建项目的时候直接使用，我这里选择的是不保存。

回车完成。

项目初始化完成之后。按下面的方法就可以启动项目了。

  1.  $ cd my-project
  2.  $ npm run serve
  4. adminqiandeMacBook-Pro:demo02 adminqian$ cd my-project/
  5. adminqiandeMacBook-Pro:my-project adminqian$ npm run serve

启动后，控制台显示如下：

  1.  DONE  Compiled successfully in 4049ms                                  22:13:58
  4.   App running at:
  5.   - Local:   http://localhost:8080/ 
  6.   - Network: http://192.168.0.2:8080/
  8.   Note that the development build is not optimized.
  9.   To create a production build, run npm run build.

之后，在浏览器访问 http://localhost:8080/ 即可。

初始化后项目中的 package.json 内容如下：

  1. {
  2.   "name": "my-project",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "serve": "vue-cli-service serve",
  7.     "build": "vue-cli-service build",
  8.     "lint": "vue-cli-service lint"
  9.   },
  10.   "dependencies": {
  11.     "core-js": "^2.6.5",
  12.     "vue": "^2.6.10",
  13.     "vue-router": "^3.0.3",
  14.     "vuex": "^3.0.1"
  15.   },
  16.   "devDependencies": {
  17.     "@vue/cli-plugin-babel": "^3.11.0",
  18.     "@vue/cli-plugin-eslint": "^3.11.0",
  19.     "@vue/cli-service": "^3.11.0",
  20.     "babel-eslint": "^10.0.1",
  21.     "eslint": "^5.16.0",
  22.     "eslint-plugin-vue": "^5.0.0",
  23.     "vue-template-compiler": "^2.6.10"
  24.   }
  25. }

在 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

  1. npm install ant-design-vue --save
  2. npm install babel-plugin-import --save-dev
  3. npm install less@2.7.3 --save-dev
  4. npm install less-loader@4.1.0 --save-dev

babel-plugin-import 是按需引入 ant-design-vue 所需要的
less 和 less-loader 不安装，项目会启动不起来。且版本不能太高，否则会报错。

修改 babel.config.js 文件

  1. module.exports = {
  2.   presets: [
  3.     '@vue/app'
  4.   ],
  5.   plugins: [
  6.    [
  7.      "import",
  8.      { libraryName: "ant-design-vue", libraryDirectory: "es", style: true }
  9.    ]
  10.   ]
  11. }

至此， ant-design-vue 的引入完成。

此时 package.json 内容如下：

  1. {
  2.   "name": "my-project",
  3.   "version": "0.1.0",
  4.   "private": true,
  5.   "scripts": {
  6.     "serve": "vue-cli-service serve",
  7.     "build": "vue-cli-service build",
  8.     "lint": "vue-cli-service lint"
  9.   },
  10.   "dependencies": {
  11.     "ant-design-vue": "^1.3.16",
  12.     "core-js": "^2.6.5",
  13.     "vue": "^2.6.10",
  14.     "vue-router": "^3.0.3",
  15.     "vuex": "^3.0.1"
  16.   },
  17.   "devDependencies": {
  18.     "@vue/cli-plugin-babel": "^3.11.0",
  19.     "@vue/cli-plugin-eslint": "^3.11.0",
  20.     "@vue/cli-service": "^3.11.0",
  21.     "babel-eslint": "^10.0.1",
  22.     "eslint": "^5.16.0",
  23.     "babel-plugin-import": "^1.12.1",
  24.     "eslint-plugin-vue": "^5.0.0",
  25.     "less": "^2.7.3",
  26.     "less-loader": "^4.1.0",
  27.     "vue-template-compiler": "^2.6.10"
  28.   }
  29. }

测试 ant-design-vue

我们展示一个 Button
修改 Home.vue 文件

  1. <template>
  2.   <div class="home">
  3.    <a-button type='primary'>Click me</a-button>
  4.    </div>
  5. </template>
  7. <script>
  8. // @ is an alias to /src
  9. import HelloWorld from '@/components/HelloWorld.vue'
  11. gl>import Vue from 'vue'
  12. gl>import {Button} from 'ant-design-vue'
  14. gl>Vue.use(Button)
  16. export default {
  17.   name: 'home',
  18.   components: {
  19.     HelloWorld
  20.   }
  21. }
  22. </script>

效果如图：

扫码分享
版权说明
作者：SQBER
文章来源：http://www.sqber.com/articles/front-rear-separation-front-start.html
本文版权归作者所有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
sqber 2017-2021 冀ICP备17029815 站点地图