首頁 > web前端 > js教程 > 主體

圖文介紹vue.js從安裝到建造過程

高洛峰
發布: 2017-03-19 09:37:16
原創
1290 人瀏覽過

這篇文章主要為大家詳細介紹了vuejs從安裝到搭建的整個過程,具有一定的參考價值,感興趣的小伙伴們可以參考一下

#最初的時候用vue是直接下載相關文件依照以前的方法來操作的

後來發現安裝好以後似乎用起來更便利,然後就開始琢磨著怎麼搭起框架來,下面是過程:

安裝

1、 安裝nodejs

直接上網找下載就好

2、安裝淘寶鏡像

打開命令列輸入

npm install -g cnpm --registry= https://registry.npm.taobao.org
登入後複製

3、安裝webpack

cnpm install webpack -g
登入後複製

4、在你想要新建專案的路徑下新建資料夾用於存放專案文件

cd 進入你的檔案路徑

vue init webpack-simple 工程名字(名字不能用中文)

#後面會有一些預設的設定

Target directory exists. Continue? (Y/n) 直接回车默认
  Project name (vue-test) 直接回车默认
  Project description (A Vue.js project) 直接回车默认
  Author 写你自己的名字
登入後複製

5、完成以後就會發現你的資料夾裡已經有了所需的檔案

圖文介紹vue.js從安裝到建造過程

6、安裝npm 專案依賴這一步會比較慢因為檔案很多

npm install
登入後複製


7、運行你的專案

npm run dev
登入後複製


到這裡你的基本安裝以及搭建就算是完成了

下面就寫一些我在專案裡遇到的一些需要檔案的引入

1、jQuery的導入

之前在跟別人討論的時候他說vue不需要用jQuery 但是我們專案那邊說要安裝所以我就安裝了-_-
首先是命令列安裝

npm install jquery --save
登入後複製


加入- -save 的意思是保留到本地
然後再webpack.config.js 中
module.exports.plugins =中加入

new webpack.optimize.CommonsChunkPlugin('common.js'),
 new webpack.ProvidePlugin({
  $: 'jquery',
  jquery: 'jquery'
 })
登入後複製


還有再要引用的js中加入

import $ from 'jquery'
window.$=$
登入後複製


#這樣jQuery就成功導入專案中了

2、靜態css以及js導入

靜態css 導入就是在對應的.vue檔中import
例如

@import './assets/css/global.css';
登入後複製


靜態js在對應的js中require 還有這些js以及css要放在assets下面

require('./assets/js/global.js')
登入後複製


3、vue-resource 導入
#還有elementui導入方法都是一樣這裡就醫vue-resource為例

npm install vue-resource --save
登入後複製


之後在需要導入的js中import還有use

import VueResource from 'vue-resource'
Vue.use(VueResource)
登入後複製



以上是圖文介紹vue.js從安裝到建造過程的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板