vue ··· 1 vue env start
阿新 • • 發佈：2020-08-10
vue環境的搭建可能是最頭痛的地方了，，此文記錄過程
es6和commonjs
es6的匯出export default {} ，匯入import {} from ‘’
commonjs的匯出 modules.exports = { }，匯入require ''
webpack的使用
安裝全域性
npm install [email protected] -g
安裝區域性
npm install [email protected] --save -dev
webpack與npm run build
新建一個webpack配置檔案，指定出口和入口
const path = require('path')
module.exports={ entry: './src/main.js', output:{ path: path.resolve(__dirname,'dist'), filename: 'bundle.js' }, }
使用npm init新建一個package.js，指定build的命令為webpack
"scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" },
就可以使用npm run build代替webpack了
使用vue
初級使用，為解決部分問題
安裝
npm install vue --save
新建一個index.html引入打包後的js
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="appView Code"> </div> <script src="./dist/bundle.js"></script> <!--為什麼要最後引入，因為先有app的template再有vue管理app--> </body> </html>
新建一個入口js檔案，引用app.js檔案
/** * Created by lenovo on 2020/8/9. */ const {add, mul} =require('./mainUtil')//commonjs的匯入語法，require函式，用於匯入模組，module.exports變數，用於匯出模組 console.log(add(10, 20)); console.log(mul(10, 20)); import {name , age} from './info.js'//es6的匯入語法 console.log(name); console.log(age); require('./fontsize.css') import Vue from 'vue' import App from './app.js' // const App = { // template: `<div id="app"> // {{ message }} // <button @click="btnClick">按鈕</button> // <label id="lab" v-show = 'seen'>顯示/隱藏</label> // </div>`, // data(){ // return{ // message: 'hello', // seen: 'True' // } // }, // methods:{ // btnClick(){ // this.seen = !this.seen // } // } // } new Vue({ el: "#app", template:`<App/>`, components:{ App }, data: { message: 'hello', seen: 'True' }, // vue是資料驅動的，所以先定義資料，再用資料程式設計 }) //vue的使用要經歷，1，使用vue管理div,2,解決vue的編譯模組問題
新建一個app.js檔案
/** * Created by lenovo on 2020/8/10. */ export default { template: `<div id="app"> {{ message }} <button @click="btnClick">按鈕</button> <label id="lab" v-show = 'seen'>顯示/隱藏</label> </div>`, data(){ return{ message: 'hello', seen: 'True' } }, methods:{ btnClick(){ this.seen = !this.seen } } } //commonjs輸出vue component{}
會出現一個編譯的問題，需要改動編譯器至esm.js
/** * Created by lenovo on 2020/8/10. */ const path = require('path') //node_modules內建模組，有resolve拼接方法，require是commonjs的匯入語法 module.exports={ entry: './src/main.js', output:{ path: path.resolve(__dirname,'dist'), filename: 'bundle.js' }, //entry和output指定webpack的輸入和輸出的地方 module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }, //css檔案的配置，見webpack的官網的loads resolve:{ alias:{ 'vue$': 'vue/dist/vue.esm.js' } } //resolve，使用alias指定vue的編譯模式，多是使用esm.js } //commonjs匯出語法，export default APP是es6的匯出語法
這時就能訪問了