-
一、前端的價(jià)值：1、搭建前端工程：數(shù)據(jù)緩存、es6和less（可以加快開(kāi)發(fā)效率）。2、網(wǎng)絡(luò)優(yōu)化：http(所有靜態(tài)資源都是通過(guò)http請(qǐng)求的)。3、api定制。4、node.js層。二、vue-cli生成的項(xiàng)目就是基于webpack的前端工程。
查看全部 -
vue工程的搭建
?npm init
1、npm i webpack vue vue-loader
2、npm i css-loader vue-template-compiler
3、新建src目錄并在src下新建app.vue
4、在app.vue中編寫(xiě)vue組件
5、在根目錄下新建webpack.config.js
查看全部 -
? ? ? ? // // 2.2以下版本（2.1-） plugins要寫(xiě)在module.exports.module里面
? ? ? ? // plugins: [
? ? ? ? //? ? ?new HtmlWebpackPlugin({
? ? ? ? //? ? ? ? ?template: __dirname + "/app/index.tmpl.html"http://new 一個(gè)這個(gè)插件的實(shí)例，并傳入相關(guān)的參數(shù)
? ? ? ? //? ? ?})
? ? ? ? // ],
? ? },
? ? //2.2+以上版本 plugins要寫(xiě)在module.exports.module外面(即module.exports里面)
? ? plugins: [
? ? ? ? new HtmlWebpackPlugin({
? ? ? ? ? ? template: __dirname + "/app/index.tmpl.html"http://new 一個(gè)這個(gè)插件的實(shí)例，并傳入相關(guān)的參數(shù)
? ? ? ? })
? ? ],
原文鏈接：https://blog.csdn.net/jiajia199470/article/details/77100466
查看全部 -
Module build failed (from ./src/index.js):
C:\aboutHtml\pro_demo\src\index.js:1
(function (exports, require, module, __filename, __dirname) { import Vue from 'vue'
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ^^^^^^
SyntaxError: Cannot use import statement outside a module
?錯(cuò)誤解決：
添加module ：
????module:{
????????rules:[
????????????{
????????????????test:?/.js$/,
????????????????loader:?'babel-loader',
????????????????exclude:?/node_modules/
????????????},
????????????{
????????????test:?/.vue$/,
????????????loader:?'vue-loader'
????????}
????]
????},
導(dǎo)入模塊：
npm install babel
npm install babel-core
npm install babel-loader@7.1.5
查看全部 -
?頁(yè)面分成不同的組件
?vue和webpack的配置和使用?
styles?
查看全部 -
初始化項(xiàng)目npm init
安裝需要的包npm install webpack Vue Vue-loader
安裝需要的依賴 npm i css-loader vue-template-compiler
新建文件夾src 放置編碼
.vue文件是vue的特殊開(kāi)發(fā)方式；是一個(gè)組件不能直接掛載到html中
需要新建index.js文件
新建文件webpackconfig.js 打包前端資源
運(yùn)行npm run build
查看全部 -
前端價(jià)值
查看全部 -
autoprefixer -- 7.2.3????????處理css屬性，加兼容前綴
postcss-loader ---2.0.9
babel-core --- 6.26.0
babel-loader -- 7.1.2
babel-preset-env -- 1.6.1
babel-plugin-transform-vue-jsx -- 3.5.0
查看全部 -
來(lái)查看全部
-
1.global樣式
2.背景虛化的樣式
3.style標(biāo)簽中 設(shè)定scoped只應(yīng)用于指定組件內(nèi)
4.組件引用
5.Vue中監(jiān)聽(tīng)事件 ：v-on：事件名稱，@事件名稱--（后面可以添加修飾符）
6.class的動(dòng)態(tài)寫(xiě)法：：class = “[]”
7.v-for 循環(huán) 使用是，需要申明唯一key 提高性能
8.required=true 表示必傳參數(shù)
查看全部 -
babel-loader 安裝及配置；postcss-loader 安裝及配置；computed計(jì)算；Vue組件解析；Vue數(shù)據(jù)綁定原理
查看全部 -
.vue文件 和 .jsx 文件, 最終都轉(zhuǎn)化成 render() { } 方法 .
查看全部 -
將模板部分寫(xiě)入 render() { } 里面.
查看全部 -
.jsx 文件就是將 HTML 寫(xiě)在?JavaScript? 文件里面.
查看全部 -
hot: true 配置項(xiàng),能實(shí)現(xiàn)頁(yè)面中 某個(gè)組件的刷新,避免測(cè)試時(shí)候,頁(yè)面其它數(shù)據(jù)消失.
查看全部
舉報(bào)