vue.js從安裝到搭建過(guò)程詳解

最初的時(shí)候用vue是直接下載相關(guān)文件 按照以前的方法來(lái)操作的

成都創(chuàng)新互聯(lián)公司專注于中小企業(yè)網(wǎng)站建設(shè)、策劃制作、運(yùn)行維護(hù)，主要提供一站式的企業(yè)網(wǎng)站建設(shè)服務(wù)。建站類型：公司網(wǎng)站建設(shè)、品牌網(wǎng)站建設(shè)、外貿(mào)網(wǎng)站制作獨(dú)立站等。創(chuàng)新互聯(lián)不是單一的建網(wǎng)站，而是結(jié)合企業(yè)的建站目標(biāo)去規(guī)劃網(wǎng)站怎么建，如何利于運(yùn)營(yíng)，尋求適合的建站方案。其次，網(wǎng)站后臺(tái)操作的便捷性也是網(wǎng)站制作過(guò)程中的重點(diǎn)，成都創(chuàng)新互聯(lián)公司的網(wǎng)站后臺(tái)簡(jiǎn)單便捷，真正實(shí)現(xiàn)了零基礎(chǔ)操作。

后來(lái)發(fā)現(xiàn)安裝好以后似乎用起來(lái)更便利，然后就開始琢磨著怎么搭起框架來(lái)，下面是過(guò)程：

安裝

1、 安裝nodejs

直接網(wǎng)上找下載就好

2、安裝淘寶鏡像

打開命令行 輸入

npm install -g cnpm --registry= https://registry.npm.taobao.org

3、安裝webpack 

cnpm install webpack -g

4、在你想要新建項(xiàng)目的路徑下新建文件夾 用于存放項(xiàng)目文件

cd 進(jìn)入你的文件路徑

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

后面會(huì)有一些默認(rèn)的設(shè)置 

Target directory exists. Continue? (Y/n) 直接回車默認(rèn)
  Project name (vue-test) 直接回車默認(rèn)
  Project description (A Vue.js project) 直接回車默認(rèn)
  Author 寫你自己的名字

5、完成以后 就會(huì)發(fā)現(xiàn) 你的文件夾里已經(jīng)有了所需的文件

vue.js從安裝到搭建過(guò)程詳解

6、安裝npm 項(xiàng)目依賴 這一步會(huì)比較慢 因?yàn)槲募芏?/p>

npm install

7、運(yùn)行你的項(xiàng)目

npm run dev

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

下面就寫一些我在項(xiàng)目里遇到的一些需要文件的引入

1、jQuery的導(dǎo)入

之前在和別人討論的時(shí)候 他說(shuō)vue不需要用jQuery 但是我們項(xiàng)目那邊說(shuō)要安裝 所以我就安裝了-_-
首先是命令行安裝

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就成功導(dǎo)入項(xiàng)目中了

2、靜態(tài)css以及js導(dǎo)入

靜態(tài)css 導(dǎo)入就是在相應(yīng)的.vue文件中import
例如

@import './assets/css/global.css';

靜態(tài)js在相應(yīng)的js中require 還有這些js以及css要放在assets下面

require('./assets/js/global.js')

3、vue-resource 導(dǎo)入
還有elementui導(dǎo)入方法都是一樣 這里就醫(yī)vue-resource為例

npm install vue-resource --save

之后在需要導(dǎo)入的js中import還有use

import VueResource from 'vue-resource'
Vue.use(VueResource)

本文已被整理到了《Vue.js前端組件學(xué)習(xí)教程》，歡迎大家學(xué)習(xí)閱讀。

關(guān)于vue.js組件的教程，請(qǐng)大家點(diǎn)擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。

本文題目：vue.js從安裝到搭建過(guò)程詳解
網(wǎng)頁(yè)路徑：http://bm7419.com/article46/pssghg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、網(wǎng)站排名、面包屑導(dǎo)航、、做網(wǎng)站、網(wǎng)站內(nèi)鏈

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)

外貿(mào)網(wǎng)站制作