1. vue-cli 構建項目

# 全局安裝 vue-cli $ npm install --global vue-clif # 創建一個基于 webpack 模板的新項目 $ vue init webpack your-project-name # 安裝依賴 $ npm install # 進入項目 $ cd your-project-name # 開發版本打包并運行 $ npm run dev # 線上環境整個項目打包 生成 dist 可以直接部署到服務器上的文件夾 npm run build

2. 項目模板中使用 less 方法

? ?首先安裝 less 和 less-loader ，在項目目錄下運行如下命令

# npm安裝 $ npm install less less-loader --save-dev # 或者使用 yarn $ yarn add less less-loader --dev

• 安裝成功后，打開 build/webpack.base.conf.js ，在 module.exports = 的對象的 module.rules 后面添加一段：

module.exports = {// 此處省略無數行，已有的的其他的內容module: { rules: [ // 此處省略無數行，已有的的其他的規則 { test: /\.less$/, loader: "style-loader!css-loader!less-loader", } ] } }

• 最后在代碼中的 style 標簽中 加上 lang="less" 屬性即可

<style scoped lang="less"> </style>

3. 在 router 下的路由文件里設置格式，將頁面上路由中默認顯示的?#/?給去掉

const router = new VueRouter({
mode: 'hash',
routes
});
// 去掉路由中自帶的 #/ 這種東西mode: 'history',

• 需要注意的是使用了?history?之后需要在服務器部署時增加一些配置，具體方法插件下面官方寫的配置方法

文檔鏈接 https://router.vuejs.org/zh/guide/essentials/history-mode.html#%E5%90%8E%E7%AB%AF%E9%85%8D%E7%BD%AE%E4%BE%8B%E5%AD%90

?

?

4. 引入 jquery

• 安裝

npm install jquery --save ? // 先在頂部引入 webpack const webpack = require('webpack') ? // plugins 中添加 ? new webpack.ProvidePlugin({ 'window.jQuery': 'jquery', // 為了兼容其他的插件 jQuery: 'jquery', $: 'jquery' })

?

?

main.js中

?

或者

main.js中

?

5、:class 使用表達式

:class="{'想要改變的類名': 判斷條件}/

6. vue-router 單頁之間如何在 js 中跳轉

// 字符串 this.$router.push('/home/first') // 對象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { userId: wise }}) this.$router.push({
path: '/setPayPwd',
query: {
forgetPassword: 1
}
})

行內

?

7. vuex 實現組件之間數據的傳遞

npm install vuex --save

• 在 src 文件夾中新建一個 stroe 文件夾，并在目錄下新建一個 index.js 文件(已有的話請忽略)，index.js 文件編輯如下

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); let store = new Vuex.Store({ state: { formData: {} // 企業提交數據表單對象 } }); export default store;

在main.js實例化對象時中添加

?

?

?

8. 通過 watch 動態的監測路由跳轉(跳轉時)和 APP.vue 中設置 created 方法實時監測 path (刷新時)，來實現 header 文字的改變

• header.vue

watch: {'$route' (to, from) {// 檢測路由改變 header 內容if (to.name === 'Index') { this.$store.state.PageTitle = '預約領號'; this.$store.state.isShowBack = false; } else if (to.name === 'PreferentialDescription') { this.$store.state.PageTitle = '優惠說明'; this.$store.state.isShowBack = true; } else if (to.name === 'RuleIntroduction') { this.$store.state.PageTitle = '規則簡介'; this.$store.state.isShowBack = true; } else if (to.name === 'ReservationSuccess') { this.$store.state.PageTitle = '預約排號'; this.$store.state.isShowBack = true; } } }

9. 給 vue 掛載全局方法

• 找到 main.js 文件進行編輯，這里以 axios 為例演示

import Vue from 'vue' import axios from 'axios' Vue.prototype.axios = axios

• 使用方法 某個 .vue 文件的 sccript 中如下編輯

Vue.axios.post('url', { name: '' }) .then(response => { console.log(response) }) .catch(response => { console.log(response) })



? ?

轉載于:https://www.cnblogs.com/shuihanxiao/p/9930135.html

總結

以上是生活随笔為你收集整理的vue 常用功能和命令的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。