vue專案入門，環境搭建

2021-10-09 10:00:46 字數 2940 閱讀 6937

# 全域性安裝cnpm這個工具


# -g 表示全域性安裝，一次安裝，永久使用


npm install -g cnpm --registry=
第3步：安裝vue腳手架工具

# -g 表示全域性安裝


cnpm install @vue/cli -g
第4步：建立vue專案

# 先進入目標目錄


vue create vue-study


# 在建立專案的過程中，可能會涉及到vue版本的選擇，建議選擇2.0


# 如果還需要選擇包管理工具，建議使用 npm
第5步：啟動vue專案

# 進入專案的根目錄


npm run serve


# 在瀏覽器中通過本地服務來訪問vue專案


# 自己配置乙個start命令


npm start
如果當前**沒有node_modules包

執行cnpm install可以根據package.json檔案進行重灌

1、node_modules

是整個vue程式執行所必須的依賴，不能隨便改

當你分享**時，node_modules不用給別人

2、package.json

是整個應用程式的說明檔案

它記錄當前應用程式所需要的第三方包

它還指定專案若干操作命令

3、public

是本地靜態資源服務目錄

作用：用於實現單頁面應用程式

第1步：安裝vue-router

cnpm install vue-router -s


# -s 表示安裝完成時，同步把這個包記錄在package.json檔案'dependencies'中


# -d 表示安裝完成時，同步把這個包記錄在package.json檔案'devdependencies'中


# -g 表示全域性安裝這個包，一次安裝，永久使用
第2步：在src根目錄，新建乙個router.js的檔案，**如下

# 引入vuerouter類，並註冊


import vue from 'vue'


import vuerouter from 'vue-router'


vue.use(vuerouter)


# 引入路由匹配所需要的元件


import home from './pages/home.vue'


import find from './pages/find.vue'


# 建立路由例項，並丟擲


export default new vuerouter(,


]})
第3步：在main.js中掛載路由

import router from './router.js'


new vue()
1、安裝

cnpm install vuex -s
2、註冊並建立store

在src根目錄建立 store.js 檔案

import vue from 'vue'


import vuex from 'vuex'


vue.use(vuex)


export default new vuex.store(,


mutations: {}


})
3、在main.js中掛載store

import store from './store'


new vue( from 'vuex'


# 被map*系列方法對映進來的，都可以使用this直接訪問，使用起來更方便。


export default ,


methods: 


}
特別注意1：在分modules時，一定要給每乙個子store開啟命名空間——namespaced:true

特別注意2：在actions中也可以直接修改state，但不建議這麼做，因為這麼做devtools就失效了。

簡介：它是基於promise封裝 axios().then().catch().finall()

特點：可以用瀏覽器環境，也可用於node.js環境

安裝：cnpm install axios -s

文件：什麼是跨域？協議、ip位址和埠號，三者有任意乙個不相同就是跨域。

怎麼理解cors同源策略？

只有瀏覽器環境下才有同源策略，是瀏覽器內建一種安全機制。

它不阻塞img、js、css等靜態資源的請求

它只針對xhr通訊，針對的結果是ajax請求根本發不出去

怎麼解決瀏覽器環境下跨域問題呢？

思路：讓瀏覽器客戶端向本地同源服務發起api請求，本地服務收到請求時將其****至遠端目標伺服器。

在vue環境下具體做法：

在專案根目錄新建乙個vue.config.js的檔案，**如下：

module.exports = 


}}}
重啟專案，然後把axios封裝裡的baseurl改變本地伺服器位址。

在vue腳手架環境預設不能sass

要安裝兩個外掛程式即可：

cnpm install sass-loader -d


cnpm install node-sass -d
在元件如何使用sass？常用語法：變數定義，作用域巢狀，&代表是父元素。

注意：工作中，不是所有vue專案都使用sass，也可能會使用到less、postcss、stylus這些css技術

如果使用其它的，自己翻vue cli 指南文件（'css相關』這篇文章中去找）

vue入門環境搭建

最近，vue.js越來越火。在這樣的大浪潮下，我也開始進入vue的學習行列中，在網上也搜了很多教程，按著教程來做，也總會出現這樣那樣的問題 坑啊，由於網上那些教程都是vue.js 1.x版本的，現在用vue.js 的構建工具都已經公升級到2.0版本了 經過了一段時間的摸索和看官方的教程和api，才了...

ExtJS入門 環境搭建

extjs是一種主要用於建立前端使用者介面，是乙個基本與後台技術無關的前端ajax框架。一 引入類庫檔案 extjs類庫介紹 adapter 負責將裡面提供第三方底層庫 包括ext 自帶的底層庫 對映為ext 所支援的底層庫。build 壓縮後的ext 全部原始碼 裡面分類存放 docs api 幫...

Pig入門 環境搭建

pig入門 環境搭建 本文介紹在linux redhat hadoop2.2.0 jdk1.7的環境下安裝pig 0.14.0.二 安裝及配置 1 解壓至安裝目錄 比如 tar zxvf pig 0.14.0.tar.gz c itcast 2 配置 編輯 bash profile檔案 新增 exp...