一、@vue/cli用法

安裝

npm

npm install -g @vue/cli

yarn

yarn global add @vue/cli

安裝完成后可以使用 vue create 來創建一個項目了

vue create . //加點是當前目錄創建，可自己選擇

創建的時候會讓你選擇配置，新手可以選擇默認。

進入創建好的目錄后運行

yarn serve 或者 webpack-dev-server 或者 npm run serve

這樣就可以打開項目了

當然 如果你沒有安裝VsCode或者webstorm也可以使用codesandbox.io來進行在線開發

二、vue完整版和非完整版區別

完整版對應文件名：從CDN引入vue.js ; vue.min.js 。可以從HTML或template直接得到視圖,有compiler編譯器可以將含有占位符{{}}或者條件語句變成真實的DOM節點，compiler比較復雜會占用一定體積

非完整版對應文件名：vue.runtime.js ； vue.runtime.min.js。沒有compiler,不能將HTML變成節點。webpack通過vue-loader(在yarn build里已設置)將html變成h('div',this.n)

vue完整版 template的使用方法：直接寫在頁面上或者JS上

<template><div id="app"> {{n}}<button @click="add">+1</button> </div> </template>

vue非完整版 render的使用方法

render函數接收一個參數h，這個參數是vue傳的；用這個參數去創建實例

render(h){ return h('div', [this.n,h（'{on:{click:this.add}’,'+1'])}

vue單文件組件例子

新建demo.vue

<template><div class="red">{{n}}<button @click="add">+1</button></div> </template><srcipt> export default{ data(){return {n:0} }, methods:{add(){this.n +=1} } } </srcipt><style scoped> .red{color:red; } </style>

然后在main.js引入

import demo from "./demo.vue" new Vue({el: "#app",render(h) {return h(demo)} })

vue-loader會將.vue的內容翻譯成h構建方法變成一個對象，但這樣做HTML就只有一個#div.app，SEO（搜索引擎優化）不友好，因此在HTML里把title、description、keyword、h1、a寫好即可

總結

最好總是使用非完整版，然后配合使用vue-loader和vue文件

1.保證用戶體驗，用戶下載的JS文件體積更小，但只支持h函數

2.保證開發體驗，開發者可直接在vue文件里寫html標簽，而不寫h函數

3.vue-loader把vue文件里的html轉化成h函數

總結

以上是生活随笔為你收集整理的vue 2个方法先后执行_浅析Vue的2个版本的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。