?包含：

vue-cli和@vue/cli ? element-ui mint-ui? axios vuex(待) webpack簡單配置和多頁面配置，開發(fā)跨域

npm安裝

npm i element-ui -S

按需引入

npm install babel-plugin-component -D

完整組件列表和引入方式：

import Vue from 'vue'; import {Pagination,Dialog,Autocomplete,Dropdown,DropdownMenu,DropdownItem,Menu,Submenu,MenuItem,MenuItemGroup,Input,InputNumber,Radio,RadioGroup,RadioButton,Checkbox,CheckboxButton,CheckboxGroup,Switch,Select,Option,OptionGroup,Button,ButtonGroup,Table,TableColumn,DatePicker,TimeSelect,TimePicker,Popover,Tooltip,Breadcrumb,BreadcrumbItem,Form,FormItem,Tabs,TabPane,Tag,Tree,Alert,Slider,Icon,Row,Col,Upload,Progress,Badge,Card,Rate,Steps,Step,Carousel,CarouselItem,Collapse,CollapseItem,Cascader,ColorPicker,Transfer,Container,Header,Aside,Main,Footer,Loading,MessageBox,Message,Notification } from 'element-ui';Vue.use(Pagination); Vue.use(Dialog); Vue.use(Autocomplete); Vue.use(Dropdown); Vue.use(DropdownMenu); Vue.use(DropdownItem); Vue.use(Menu); Vue.use(Submenu); Vue.use(MenuItem); Vue.use(MenuItemGroup); Vue.use(Input); Vue.use(InputNumber); Vue.use(Radio); Vue.use(RadioGroup); Vue.use(RadioButton); Vue.use(Checkbox); Vue.use(CheckboxButton); Vue.use(CheckboxGroup); Vue.use(Switch); Vue.use(Select); Vue.use(Option); Vue.use(OptionGroup); Vue.use(Button); Vue.use(ButtonGroup); Vue.use(Table); Vue.use(TableColumn); Vue.use(DatePicker); Vue.use(TimeSelect); Vue.use(TimePicker); Vue.use(Popover); Vue.use(Tooltip); Vue.use(Breadcrumb); Vue.use(BreadcrumbItem); Vue.use(Form); Vue.use(FormItem); Vue.use(Tabs); Vue.use(TabPane); Vue.use(Tag); Vue.use(Tree); Vue.use(Alert); Vue.use(Slider); Vue.use(Icon); Vue.use(Row); Vue.use(Col); Vue.use(Upload); Vue.use(Progress); Vue.use(Badge); Vue.use(Card); Vue.use(Rate); Vue.use(Steps); Vue.use(Step); Vue.use(Carousel); Vue.use(CarouselItem); Vue.use(Collapse); Vue.use(CollapseItem); Vue.use(Cascader); Vue.use(ColorPicker); Vue.use(Container); Vue.use(Header); Vue.use(Aside); Vue.use(Main); Vue.use(Footer);Vue.use(Loading.directive);Vue.prototype.$loading = Loading.service; Vue.prototype.$msgbox = MessageBox; Vue.prototype.$alert = MessageBox.alert; Vue.prototype.$confirm = MessageBox.confirm; Vue.prototype.$prompt = MessageBox.prompt; Vue.prototype.$notify = Notification; Vue.prototype.$message = Message; View Code

全局配置：目前只支持配置組件尺寸

Vue.use(Element, { size: 'small' });

自定義主題（按需加載方式）

npm i element-theme -g npm i element-theme-chalk -D et -i [可以自定義變量文件]

之后會生成一個element-variables.scss文件，直接在這個文件上修改變量或是添加變量即可。

編譯：

et

修改.babelrc?

{"plugins": [["component", [{"libraryName": "element-ui","styleLibraryName": "~theme"}]]] }

自此已經(jīng)搭建好vue與element-ui的工作環(huán)境。

剝離配置文件

在模板index.html中加入

<script>window.g = {ROOTURL: "XXXXXXXXXX"} </script>

在src/下新建config/ip.js

const G = window.g; export const ROOTURL = G.ROOTURL;

在main.js中引入使用

import {ROOTURL} from './config/ip' Vue.prototype.ROOTURL = ROOTURL;

切換環(huán)境的時候直接在模板index.html中修改。

打包時

productionSourceMap：false xhtml: true //html-webpack-plugin 實例中添加 添加xhtml頭 removeAttributeQuotes：false //html-nimifier 實例中添加 保留引號 keepClosingSlash: true //html-nimifier 實例中添加 保留閉合
collapseWhitespace: false // 取消document tree 壓縮

這里是按現(xiàn)在項目需要

• 不需要map
• 需要保留引號
• 需要保留單標(biāo)簽閉合
• 方便修改配置

因為總項目中已經(jīng)有一個index.html文件，不能在打包的時候也命名成index，所以修改config/index.js中

build:{ 　　index: path.resolve(__dirname, '../dist/XXXX.html'), 　　assetsSubDirectory: 'staticXXXX', }

?

其他配置在config和build中都能修改。

添加axios

npm install axios --save-dev

在src/下新建config/request.js

import axios from "axios"; const Axios = axios.create({baseURL: "", timeout: 8000,responseType: "json",headers: {"Content-Type": "application/json;charset=utf-8"},timeout: 1000 });Axios.interceptors.request.use( // 請求攔截器config => {// 在發(fā)送請求之前做某件事 ......return config;},error => {console.log(error)return Promise.reject(error);} );Axios.interceptors.response.use( // 響應(yīng)攔截器response => {......return response;},error => {if (error.response) {......} else {console.log('Error', error.message);}return Promise.reject(error);} ); View Code

基本公用配置，按項目需求修改，導(dǎo)出。

在main.js中引入使用

import {Axios} from './config/request' Vue.prototype.Axios= Axios;

個人使用方式

axios.post(url, params).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}); axios.get(url, {params:params}).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);});ole.log(error);}); axios.put(url, params).then(function (response) {console.log(response);}).catch(function (error) {console.log(error);}); View Code

看后臺接口，如果是URL直接拼接，那就引入qs等給他拼^>^。

執(zhí)行多個并發(fā)請求

function getUserAccount() {return axios.get('/user/12345'); }function getUserPermissions() {return axios.get('/user/12345/permissions'); }axios.all([getUserAccount(), getUserPermissions()]).then(axios.spread(function (acct, perms) {// 兩個請求現(xiàn)在都執(zhí)行完成})); View Code

近期兩個項目，一個用的vue-resource，一個用的axios。不過復(fù)雜一些的異步請求都要配合asnyc/await使用(感覺自己都“優(yōu)雅”了呢)。

用的比較簡單，看文檔足以。

element-ui適合在pc端，而移動端也有一套相應(yīng)的ui，mint-ui，使用方法和element-ui相同。有新的移動項目的話，可以跟同事商量一下使用。

?

?

噔噔噔噔~~~~~~~~~

webApp里用mint-ui了，跟以往項目不同的是這次需要采用多頁面。

utils.js

獲取匹配的多入口，作為module.exports.entry的參數(shù)

/**
*
* @param {String} globPath 頁面文件所在的文件夾名字，一般為pages或者views
*/ exports.getEntry=function(globPath){var files=glob.sync(globPath)// 獲取所有的頁面路徑var entries={}var basenamefor(var i=0;i<files.length;i++){basename=path.basename(files[i],path.extname(files[i]))entries[basename]=files[i]}return entries }

?注釋掉config/index.js中的build.index，修改webpack.prod.config 和webpack.dev.config中html打包，

const pages = utils.getEntry('./src/pages/**/*.js') const pageNames = Object.keys(pages) pageNames.forEach(function (pathname) {var dirname = pages[pathname].split('.js')[0]var conf = {filename: pathname + '.html',template: dirname + '.html',inject: true,xhtml: true, // 打包minify: { //打包removeComments: true,collapseWhitespace: false,removeAttributeQuotes: false,keepClosingSlash: true},chunksSortMode: 'dependency',chunks: ['manifest', 'vendor', pathname] // dev只需要 pathname}webpackConfig.plugins.push(new HtmlWebpackPlugin(conf)) })

打包配置完畢；

然后修改webpack.dev.conf.js

historyApiFallback: {rewrites: [{from: /url1/, to: config.dev.assetsPublicPath + 'src/pages/url1/url1.html'},{from: /url2/, to: config.dev.assetsPublicPath + 'src/pages/url2/url2.html'},{from: /url3/, to: config.dev.assetsPublicPath + 'src/pages/url3/url3.html'},],},

localhost:8080/url1.html就能邊開發(fā)邊預(yù)覽了。

這時候剝離的配置，寫在根目錄下的static中。

?

開發(fā)版本跨域? ?https://www.cnblogs.com/Merrys/p/9699549.html

?

公司給我換了mac一體機(jī)，開開心心的換電腦裝軟件跑項目，全掛了，各種搗鼓都不行，就干脆把vue-cli換成@vue/cli了，還好，不絕人路，哈哈哈哈哈哈哈

附上文檔地址：@vue/cli

記錄幾個注意點：

1.要先卸載vue-cli；

2.修改或是新增一些webpack的配置，新建一個vue.config.js寫；

3.全局注入變量----新建.env

好了。把之前項目要用的拷過來就好了，??

?

轉(zhuǎn)載于:https://www.cnblogs.com/Merrys/p/8984104.html

與50位技術(shù)專家面對面20年技術(shù)見證，附贈技術(shù)全景圖

總結(jié)

以上是生活随笔為你收集整理的element-vue的简单使用的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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