vue项目构建
建議采用vue-cli3
一、什么是vue-cli
vue-cli是由vue官方發布的快速構建vue單頁面的腳手架。參見vue-cli官方網站。http://vuejs-templates.github.io/webpack/
之前需要使用vue的單文件組件的功能，即將不同的模板分離到不同的.vue后綴的文件中，這樣做需要使用webpack打包。參見官方說明：https://cn.vuejs.org/v2/guide/single-file-components.html ?
然后在網上看來許多關于使用webpack打包文件的教程，如下：
https://github.com/varHarrie/Dawn-Blossoms/issues/7
普遍采用上面這篇文章介紹的方式。這樣需要自己配置很多文件，操作復雜。后面我發現使用vue-cli可以實現webpack的快速打包。具體操作在后面介紹
?
附上項目插件目錄
?
【命令行】
| ? | ?全局安裝手腳架 | ?創建項目 | 安裝依賴包 | 運行調試 ? | 打包發布 |
| vue-cli2 | npm install vue/cli -g | vue init webpack project-name | ?npm install | npm run dev | npm run build |
| vue-cli3 ? | npm install -g @vue/cli | vue create project-name | ?npm install | ?npm run serve | npm run build |
? ?? ?全局安裝手腳架 ?? ?創建項目 ?? ?安裝依賴包 ?? ?運行調試 ?? ?打包發布
vue-cli2 ?? ?npm install vue-cli -g ?? ?vue init webpack project-name ?? ?npm install ?? ?npm run dev ?? ?npm run build
vue-cli3 ?? ?npm install @vue/cli -g ?? ?vue create project-name ?? ?npm install ?? ?npm run serve ?? ?npm run build
"scripts": {
"serve": "vue-cli-service serve --port 80",
"build": "vue-cli-service build",?
"lint": "vue-cli-service lint"
},
?
## Project setup
```
npm install? ##安裝依賴庫
```
?
### Compiles and hot-reloads for development
```
npm run serve
```
?
### Compiles and minifies for production
```
npm run build???? ## 這樣就可以將資源文件打包到上面我們設置的文件夾dist/ 中
```
?
### Run your tests
```
npm run test
```
?
### Lints and fixes files
```
npm run lint
```
?
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).
?
### 指定根路徑
npm run serve --BASE=/mobile/demo/
npm run build --BASE=/mobile/demo/
?
【項目中的插件】
1、ui框架：element-ui（還是推薦iview，iview覆蓋樣式比element-ui方便），antd
2、按需加載ui組件：babel-plugin-component
??? /*===== main.js =====*/
??? ?
??? import 'element-ui/lib/theme-chalk/index.css'
??? import {Button } from 'element-ui'
??? ?
??? Vue.use(Button)
??? ?
??? ?
??? /*===== babel-plugin-component =====*/
??? ?
??? module.exports = {
??????? "plugins": [
??????????? [
??????????????? "component",
??????????????? {
??????????????????? "libraryName": "element-ui",
??????????????????? "styleLibraryName": "theme-chalk"
??????????????? }
??????????? ]
??????? ]
??? }
.3、路由：vue-router
??? /*===== vue.config.js =====*/
??? ?
??? ?
??? /* 設置完，可以在方便引用目標文件 */
??? ?
??? const path = require('path')
??? function resolve (dir) {
??????? return path.join(__dirname, dir)
??? }
??? module.exports = {
??????? chainWebpack: config => {
??????????? config.resolve.alias
??????????????? .set('@', resolve('src'))
??????????????? .set('pages', resolve('src/pages'))
??????????????? .set('components', resolve('src/components'))
??????????????? .set('assets', resolve('src/assets'))
??????? }
??? }
4、css預編輯器：sass-loader node-sass
??? /*===== vue.config.js =====*/
??? ?
??? /* 設置的scss文件可以在各個組件中共享 */
??? ?
??? const fs = require('fs')
??? ?
??? module.exports = {
??????? css: {
??????????? loaderOptions: {
??????????????? sass: {
??????????????????? data: fs.readFileSync('src/assets/styles/base.scss', 'utf-8')
??????????????? }
??????????? }
??????? }
??? }
5、ajax請求：axios
6、全局變量存儲：vuex
7、緩存：js-cookie
8、圖表插件：echarts
9、文本復制：clipboard
??? 第一步：頁面中導入
??? ?
??? import Clipboard from 'clipboard'
??? ?
??? 第二步：觸發元素
??? ?
??? <a href="javascript:void(0)" class="u-btn-1 blue linkCopy" :data-clipboard-text="spreakLink" @click="copy">復制</a>
??? ?
??? 第三步：回調事件
??? ?
??? copy () {
????? let self = this
????? var clipboard = new Clipboard('.linkCopy')
????? clipboard.on('success', e => {
??????? alert('專屬鏈接復制成功，趕快發給需要的朋友注冊、使用吧！')
??????? // 釋放內存
??????? clipboard.destroy()
????? })
????? clipboard.on('error', e => {
??????? // 不支持復制
??????? alert('該瀏覽器不支持自動復制')
??????? // 釋放內存
??????? clipboard.destroy()
????? })
??? }
10、引入jquery
import $ from 'jquery'
?
?
?
安裝依賴的庫：
?
總結
- 上一篇： OAuth2基本概念和运作流程
- 下一篇： 2019 年 Vue 学习路线图