vue.js從安裝到搭建過程詳解
最初的時候用vue是直接下載相關(guān)文件 按照以前的方法來操作的
后來發(fā)現(xiàn)安裝好以后似乎用起來更便利，然后就開始琢磨著怎么搭起框架來，下面是過程：
安裝
1、 安裝nodejs
直接網(wǎng)上找下載就好
2、安裝淘寶鏡像
打開命令行 輸入
npm install -g cnpm --registry= https://registry.npm.taobao.org
3、安裝webpack
cnpm install webpack -g
4、在你想要新建項目的路徑下新建文件夾 用于存放項目文件
cd 進(jìn)入你的文件路徑
vue init webpack-simple 工程名字(名字不能用中文)
后面會有一些默認(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、完成以后 就會發(fā)現(xiàn) 你的文件夾里已經(jīng)有了所需的文件
6、安裝npm 項目依賴 這一步會比較慢 因為文件很多
npm install
7、運(yùn)行你的項目
npm run dev
到這里 你的基本安裝以及搭建就算是完成了
下面就寫一些我在項目里遇到的一些需要文件的引入
1、jQuery的導(dǎo)入
之前在和別人討論的時候 他說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就成功導(dǎo)入項目中了
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組件的教程，請大家點擊專題vue.js組件學(xué)習(xí)教程進(jìn)行學(xué)習(xí)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了vue如何實現(xiàn)簡易的雙向數(shù)據(jù)綁定，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2020-12-12
這篇文章主要介紹了vue3中ref綁定dom或者組件失敗的原因及分析，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04
詳解如何優(yōu)雅運(yùn)用Vue中的KeepAlive組件
在Vue中,KeepAlive組件是一種特殊的組件,用于緩存已經(jīng)渲染過的組件實例,本文主要為大家詳細(xì)介紹了KeepAlive組件的用法,需要的小伙伴可以參考下2023-09-09
本篇文章主要介紹了vue2.0開發(fā)入門筆記之.vue文件的生成和使用 ,非常具有實用價值，需要的朋友可以參考下2017-09-09
這篇文章主要介紹了如何在vue中使用video.js 播放m3u8格式的視頻，幫助大家更好的理解和學(xué)習(xí)使用vue，感興趣的朋友可以了解下2021-02-02
這篇文章主要介紹了vue3如何自定義js文件(插件或配置)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
基于vue-cli 路由 實現(xiàn)類似tab切換效果（vue 2.0）
這篇文章主要介紹了基于vue-cli 路由 實現(xiàn)類似tab切換效果（vue 2.0），非常不錯，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-05-05
Pinia是一個基于Vue3的狀態(tài)管理庫,本文主要介紹了vue3中pinia的使用及持久化的實現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2025-04-04
這篇文章主要介紹了Vue中provide和inject的使用，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，需要的朋友可以參考一下2022-08-08
nginx如何配置vue項目history的路由模式(非根目錄)
這篇文章主要介紹了nginx如何配置vue項目history的路由模式(非根目錄),具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2023-10-10