怎么做網(wǎng)站淘寶轉(zhuǎn)換工具寧波seo關(guān)鍵詞如何優(yōu)化
開發(fā)Vue的兩種方式:
1.核心包傳統(tǒng)開發(fā)模式: 基于 html/css /js 文件，直接引入核心包，開發(fā) Vue。
2.工程化開發(fā)模式: 基于構(gòu)建工具 (例如: webpack)的環(huán)境中開發(fā) Vue。
?
?問題:
? ? ? ? 1. webpack 配置不簡單
? ? ? ? 2. 雷同的基礎(chǔ)配置
? ? ? ? 3. 缺乏統(tǒng)一標準
需要一個工具,生成標準化的配置
工程化開發(fā) & 腳手架 Vue CLI:
基本介紹:
????????Vue CLI 是 Vue 官方提供的一個全局命令工具.
????????可以幫助我們快速創(chuàng)建一個開發(fā) Vue 項目的標準化基礎(chǔ)架子。[集成了 webpack 配置]
好處:
????????1. 開箱即用，零配置
????????2. 內(nèi)置babel等工具
????????3. 標準化
使用步驟:?
1.全局安裝(一次): yarn global add @vue/cli 或 npm i @vue/cli -g
2.查看 Vue 版本: vue --version
3.創(chuàng)建項目架子: vue create project-name (項目名-不能用中文)-vue2
4.啟動項目: yarn serve 或 npm run serve (找packagejson)
腳手架目錄文件介紹 & 項目運行流程:
?
?
?main.js組件:
// 文件核心作用: 導(dǎo)入App.vue, 基于App.vue創(chuàng)建結(jié)構(gòu)渲染index.html// 1. 導(dǎo)入 Vue 核心包
import Vue from 'vue'// 2. 到入 App.vue 根組件
import App from './App.vue'// 提示: 當前處于什么環(huán)境 (生產(chǎn) / 開發(fā))
Vue.config.productionTip = false// 3. VUe實例化, 提供render方法 -> 基于App.vue創(chuàng)建結(jié)構(gòu)渲染index.html
new Vue({// el: "#app", 作用: 和 $mount('選擇器')作用一致,用于指定Vue所管理容器//render: h => h(App),render:(createElement) => {// 基于 App 創(chuàng)建元素結(jié)構(gòu)return createElement(App)}
}).$mount('#app')
index.html組件:
<body><!-- 兼容: 給不支持js的瀏覽器一個提示 --><noscript><strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><!-- Vue所管理的容器: 將來創(chuàng)建結(jié)構(gòu)動態(tài)渲染這個容器 --><div id="app"><!-- 工程化開發(fā)模式中: 這里不在直接編寫模板語法,通過 App.vue 提供結(jié)構(gòu)渲染 --></div><!-- built files will be auto injected --></body>