vue.js從安裝到搭建過(guò)程詳解
最初的時(shí)候用vue是直接下載相關(guān)文件 按照以前的方法來(lái)操作的
后來(lái)發(fā)現(xiàn)安裝好以后似乎用起來(lái)更便利，然后就開(kāi)始琢磨著怎么搭起框架來(lái)，下面是過(guò)程：
安裝
1、 安裝nodejs
直接網(wǎng)上找下載就好
2、安裝淘寶鏡像
打開(kāi)命令行 輸入
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 寫(xiě)你自己的名字
5、完成以后 就會(huì)發(fā)現(xiàn) 你的文件夾里已經(jīng)有了所需的文件
6、安裝npm 項(xiàng)目依賴 這一步會(huì)比較慢 因?yàn)槲募芏?/p>
npm install
7、運(yùn)行你的項(xiàng)目
npm run dev
到這里 你的基本安裝以及搭建就算是完成了
下面就寫(xiě)一些我在項(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í)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇開(kāi)始功能模塊的開(kāi)發(fā)，首先完成ABP模板自帶的身份認(rèn)證管理模塊和租戶管理模塊。同樣的，參考ABP的Angular版本來(lái)做。2021-05-05
Vue自定義指令實(shí)現(xiàn)彈窗拖拽四邊拉伸及對(duì)角線拉伸效果
小編最近在做一個(gè)vue前端項(xiàng)目，需要實(shí)現(xiàn)彈窗的拖拽，四邊拉伸及對(duì)角線拉伸，以及彈窗邊界處理功能，本文通過(guò)實(shí)例代碼給大家分享我的實(shí)現(xiàn)過(guò)程及遇到問(wèn)題解決方法，感興趣的朋友一起看看吧2021-08-08
移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)
這篇文章主要介紹了移動(dòng)端Vue2.x Picker的全局調(diào)用實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
vue時(shí)間組件DatePicker組件的手寫(xiě)示例
這篇文章主要為大家介紹了vue時(shí)間組件DatePicker組件的手寫(xiě)實(shí)現(xiàn)示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
element中drawer模板的實(shí)現(xiàn)
本文主要介紹了element中drawer模板的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
這篇文章主要和大家詳細(xì)介紹一下Vue中computed和watch的使用與區(qū)別，文中通過(guò)示例為大家進(jìn)行了詳細(xì)講解，對(duì)Vue感興趣的同學(xué)，可以學(xué)習(xí)一下2022-11-11
解析Vue2 dist 目錄下各個(gè)文件的區(qū)別
本篇文章主要介紹了解析Vue2 dist 目錄下各個(gè)文件的區(qū)別，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
在vue3中對(duì)響應(yīng)式數(shù)據(jù)的聲明官方給出了ref()和reactive()這兩種方式,下面這篇文章主要給大家介紹了關(guān)于Vue3中ref與reactive的相關(guān)資料,需要的朋友可以參考下2021-06-06
vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式
這篇文章主要介紹了vue截圖轉(zhuǎn)base64轉(zhuǎn)文件File異步獲取方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
Element-ui Drawer抽屜按需引入基礎(chǔ)使用
這篇文章主要為大家介紹了Element-ui Drawer抽屜按需引入基礎(chǔ)使用，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-07-07