Vue.js
Vue.js是什么锦募？
Vue.js是一套構(gòu)建用戶界面的漸進(jìn)式框架粥血。與其他重量級(jí)框架（Angular2）不同的是迟几，Vue 采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層嚷兔，它不僅易于上手森渐，還便于與第三方庫(kù)或既有項(xiàng)目整合。另一方面冒晰，當(dāng)與單文件組件和 Vue 生態(tài)系統(tǒng)支持的庫(kù)結(jié)合使用時(shí)同衣，Vue 也完全能夠?yàn)閺?fù)雜的單頁應(yīng)用程序提供驅(qū)動(dòng)。
不管你想不想了解壶运，你只需要大概知道耐齐，Vue就是和jQuery一樣是一個(gè)前端框架，它的中心思想就是數(shù)據(jù)驅(qū)動(dòng)蒋情，像遠(yuǎn)古時(shí)代的老前輩jQuery是結(jié)構(gòu)驅(qū)動(dòng)埠况，什么意思呢，以前我們寫代碼時(shí)常用$('.dom').text('我把值改變了')棵癣，這種寫法先要獲得結(jié)構(gòu)辕翰，然后再修改數(shù)據(jù)更新結(jié)構(gòu)，而Vue的做法直接就是this.msg="我改變了"狈谊，然后msg就會(huì)同步到某個(gè)結(jié)構(gòu)上喜命，視圖管理抽象為數(shù)據(jù)管理，而不是管理dom結(jié)構(gòu)了河劝。
Vue.js安裝
二.vue的環(huán)境：
1.node.js
2.cnpm
3.vue.js
4.vue/cli
腳本架
第一
安裝node.js
測(cè)試node安裝成功：
node –v
第二
安裝cnpm
測(cè)試cnpm安裝成功：
cnpm -v
第三
安裝vue.js依賴包
?命令cnpm install vue
測(cè)試vue.js安裝是否成功:
cnpm vue –V
第四
全局安裝vue/cli腳本架?? 命令cnpm install --globalvue-cli
測(cè)試vue/cli安裝是否成功:
cnpm vue/cli –v
參考地址https://blog.csdn.net/changyinling520/article/details/78247389壁榕、
終止命令窗口是ctrl+c
創(chuàng)建一個(gè)簡(jiǎn)單的vue.js項(xiàng)目
創(chuàng)建一個(gè)基于webpack的vue項(xiàng)目
前端打包工具
Cd到你要的路徑（D盤..、E盤..）
命令
vue init webpack dmsd-project 你的項(xiàng)目名稱（dmsd-project）
可選可不選
在創(chuàng)建的項(xiàng)目中引入依賴包：
等安裝結(jié)束后在安裝依賴
然后輸入路徑安裝依賴包
cd dmsd-project 到你項(xiàng)目的地址（絕對(duì)文件路徑）
cnpm install? （依賴包）
設(shè)置啟動(dòng)自動(dòng)加載頁面
找到項(xiàng)目的配置文件赎瞎、更改index.Js里面內(nèi)容牌里、False改成true、下面是更改端口务甥、重啟下項(xiàng)目生效
啟動(dòng)項(xiàng)目
cnpm run dev
路由
vue路由
定義路由
在components文件下創(chuàng)建vue文件二庵、
然后在router文件下的index.js里面定義文件路徑贪染、
./代碼文件當(dāng)前路徑缓呛、../代碼文件二級(jí)路徑催享、@代碼src
仿照這上面寫就行、
跳轉(zhuǎn)頁面《標(biāo)簽》
<!-- 使用 router-link 組件來導(dǎo)航. -->
?<!-- 通過傳入 `to` 屬性指定鏈接. --> -->
?默認(rèn)會(huì)被渲染成一個(gè) `<a>` 標(biāo)簽 -->
<router-link to="/foo">Go to Foo</router-link>
<router-link to="/bar">Go to Bar</router-link>
安裝組件
組件大全
為現(xiàn)代化 Web 界面而生的一個(gè)漸進(jìn)式框架哟绊，以數(shù)據(jù)驅(qū)動(dòng)和組件化的思想構(gòu)建因妙，采用自底向上增量開發(fā)的設(shè)計(jì)。Vue 的核心庫(kù)只關(guān)注視圖層票髓，它不僅易于上手攀涵，還便于與第三方庫(kù)或既有項(xiàng)目整合。
地址
https://www.awesomes.cn/subject/8311014#%E5%BA%94%E7%94%A8-%E6%A1%86%E6%9E%B6洽沟、
Element組件
參考地址以故、https://blog.csdn.net/zhanghuiqi205/article/details/79619317、
vue項(xiàng)目搭建的初始開始安裝Element的步驟：
首先第一步是下載：npm i element-ui -S
裝不上可以使用淘寶鏡像cnpm i element-ui -S
有時(shí)候可能裝不成功裆操，多裝幾遍
cd到你的vue.Js目錄下
第二步驟：在main.js中引入js和css
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
Vue.use(ElementUI);
第三步驟：讓vue引用Element?ui
Vue.use(ElementUI);
然后怒详，我們就可以使用Element?：那么我們引用一部分樣式看看：
組件使用
組件地址https://element.eleme.cn/#/zh-CN/component/table、
查找你想要的相對(duì)內(nèi)容復(fù)制到相對(duì)的頁面去
把復(fù)制的代碼加入到<template>
</template>里面踪区、否者樣式不出來
此時(shí)可以把一個(gè)<template> 元素當(dāng)做不可見的包裹元素昆烁，并在上面使用v-if。最終的渲染結(jié)果將不包含<template> 元素缎岗。
表單組件
導(dǎo)航組件
VUX組件
有10K的Stars静尼，Vux的靈感來自移動(dòng)應(yīng)用程序WeChat的weui這個(gè)廣泛流行的組件庫(kù)。使用它的話注意：文檔是中文的传泊，但也提供英文版本鼠渺。每一個(gè)組件都通過文檔進(jìn)行了交互式的呈現(xiàn)，并帶有現(xiàn)場(chǎng)的“移動(dòng)”模擬演示眷细。
安裝步驟
參考http://www.php.cn/js-tutorial-396202.html拦盹、
安裝vux
npm install
vux --save-dev、不行在前面加個(gè)c
安裝vux-loader
npm install
vux-loader --save-dev //官網(wǎng)沒提安裝這個(gè)薪鹦，但是不安裝會(huì)報(bào)錯(cuò)
安裝less-loader以正確編譯less源碼
npm installless less-loader --save-dev
安裝yaml-loader 以正確進(jìn)行語言文件讀取
npm installyaml-loader --save-dev
修改build/webpack.base.conf.js中的代碼
參考地址https://blog.csdn.net/sugang666/article/details/86294989掌敬、
'use strict'
const path = require('path')
const utils = require('./utils')
const config = require('../config')
const vuxLoader = require('vux-loader')
const vueLoaderConfig = require('./vue-loader.conf')
function resolve (dir) {
?return path.join(__dirname, '..', dir)
}
const webpackConfig? = {
?context: path.resolve(__dirname, '../'),
?entry: {
???app: './src/main.js'
? },
?output: {
???path: config.build.assetsRoot,
???filename: '[name].js',
???publicPath: process.env.NODE_ENV === 'production'
?????? config.build.assetsPublicPath
?????: config.dev.assetsPublicPath
? },
?resolve: {
???extensions: ['.js', '.vue', '.json', 'less'],
???alias: {
?????'vue$': 'vue/dist/vue.esm.js',
?????'@': resolve('src'),
??? }
? },
?module: {
???rules: [
?????{
???????test: /\.vue$/,
???????loader: 'vue-loader',
???????options: vueLoaderConfig
?????},
?????{
???????test: /\.js$/,
???????loader: 'babel-loader',
???????include: [resolve('src'), resolve('test')]
?????},
?????{
???????test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
???????loader: 'url-loader',
???????options: {
?????????limit: 10000,
?????????name: utils.assetsPath('img/[name].[hash:7].[ext]')
???????}
???? ?},
?????{
???????test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
???????loader: 'url-loader',
???????options: {
?????????limit: 10000,
?????????name: utils.assetsPath('media/[name].[hash:7].[ext]')
???????}
?????},
?????{
???????test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
???????loader: 'url-loader',
???????options: {
?????????limit: 10000,
?????????name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
???????}
?????}
??? ]
? }
}
module.exports =
vuxLoader.merge(webpackConfig, {
?plugins: ['vux-ui']
});
也可以參考、
https://blog.csdn.net/qq_39523111/article/details/81094546?tdsourcetag=s_pcqq_aiomsg池磁、
如果不顯示的話也可能是組件復(fù)制的有問題
組件使用
地址奔害、https://doc.vux.li/zh-CN/components/swiper.html、
選取想要的內(nèi)容地熄、
復(fù)雜代碼就行
v-charts組件
參考地址华临、https://v-charts.js.org/#/start、
在使用 echarts 生成圖表時(shí)端考，經(jīng)常需要做繁瑣的數(shù)據(jù)類型轉(zhuǎn)化雅潭、修改復(fù)雜的配置項(xiàng)揭厚，v-charts 的出現(xiàn)正是為了解決這個(gè)痛點(diǎn)》龉基于Vue2.0 和 echarts 封裝的 v-charts 圖表組件筛圆，只需要統(tǒng)一提供一種對(duì)前后端都友好的數(shù)據(jù)格式設(shè)置簡(jiǎn)單的配置項(xiàng)，便可輕松生成常見的圖表椿浓。
安裝步驟太援、
npm iv-charts echarts –S
安裝失敗使用淘寶鏡像安裝
cnpm i v-charts echarts -S
在main.js引入
import VCharts from 'v-charts'
Vue.use(VCharts)
然后就可以使用里面的組件
Muse-UI組件
安裝步驟
參考地址https://muse-ui.org/#/zh-CN/installation、
安裝命令???? npm i muse-ui -S
在main.js文件
參考地址https://muse-ui.org/#/zh-CN/usage扳碍、
importMuseUI from 'muse-ui';
import'muse-ui/dist/muse-ui.css';
Vue.use(MuseUI);
Vant組件
安裝步驟
參考地址提岔、https://youzan.github.io/vant/#/zh-CN/intro/
npm i vant -S
安裝失敗加淘寶鏡像
在main.js
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);
