建議采用vue-cli3

一、什么是vue-cli

vue-cli是由vue官方發(fā)布的快速構(gòu)建vue單頁(yè)面的腳手架。參見(jiàn)vue-cli官方網(wǎng)站。http://vuejs-templates.github.io/webpack/

之前需要使用vue的單文件組件的功能，即將不同的模板分離到不同的.vue后綴的文件中，這樣做需要使用webpack打包。參見(jiàn)官方說(shuō)明：https://cn.vuejs.org/v2/guide/single-file-components.html ?

然后在網(wǎng)上看來(lái)許多關(guān)于使用webpack打包文件的教程，如下：

https://github.com/varHarrie/Dawn-Blossoms/issues/7

普遍采用上面這篇文章介紹的方式。這樣需要自己配置很多文件，操作復(fù)雜。后面我發(fā)現(xiàn)使用vue-cli可以實(shí)現(xiàn)webpack的快速打包。具體操作在后面介紹
?

附上項(xiàng)目插件目錄

?

【命令行】

?	?全局安裝手腳架	?創(chuàng)建項(xiàng)目	安裝依賴包	運(yùn)行調(diào)試 ?	打包發(fā)布
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

? ?? ?全局安裝手腳架 ?? ?創(chuàng)建項(xiàng)目 ?? ?安裝依賴包 ?? ?運(yùn)行調(diào)試 ?? ?打包發(fā)布
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? ##安裝依賴庫(kù)

```

?

### Compiles and hot-reloads for development

```

npm run serve

```

?

### Compiles and minifies for production

```

npm run build???? ## 這樣就可以將資源文件打包到上面我們?cè)O(shè)置的文件夾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/

?

【項(xiàng)目中的插件】

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 =====*/
??? ?
??? ?
??? /* 設(shè)置完，可以在方便引用目標(biāo)文件 */
??? ?
??? 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預(yù)編輯器：sass-loader node-sass

??? /*===== vue.config.js =====*/
??? ?
??? /* 設(shè)置的scss文件可以在各個(gè)組件中共享 */
??? ?
??? const fs = require('fs')
??? ?
??? module.exports = {
??????? css: {
??????????? loaderOptions: {
??????????????? sass: {
??????????????????? data: fs.readFileSync('src/assets/styles/base.scss', 'utf-8')
??????????????? }
??????????? }
??????? }
??? }

5、ajax請(qǐng)求：axios

6、全局變量存儲(chǔ)：vuex

7、緩存：js-cookie

8、圖表插件：echarts

9、文本復(fù)制：clipboard

??? 第一步：頁(yè)面中導(dǎo)入
??? ?
??? import Clipboard from 'clipboard'
??? ?
??? 第二步：觸發(fā)元素
??? ?
??? <a href="javascript:void(0)" class="u-btn-1 blue linkCopy" :data-clipboard-text="spreakLink" @click="copy">復(fù)制</a>
??? ?
??? 第三步：回調(diào)事件
??? ?
??? copy () {
????? let self = this
????? var clipboard = new Clipboard('.linkCopy')
????? clipboard.on('success', e => {
??????? alert('專屬鏈接復(fù)制成功，趕快發(fā)給需要的朋友注冊(cè)、使用吧！')
??????? // 釋放內(nèi)存
??????? clipboard.destroy()
????? })
????? clipboard.on('error', e => {
??????? // 不支持復(fù)制
??????? alert('該瀏覽器不支持自動(dòng)復(fù)制')
??????? // 釋放內(nèi)存
??????? clipboard.destroy()
????? })
??? }

10、引入jquery

import $ from 'jquery'
?

?

?

安裝依賴的庫(kù)：

?

總結(jié)

以上是生活随笔為你收集整理的vue项目构建的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。