一、使用vue框架的簡單示例
我們本次的vue系列就使用webstorm來演示：
對于vue.js的安裝我們直接使用script的cdn鏈接來實現(xiàn)
具體可以參考如下網(wǎng)址：
https://www.bootcdn.cn/
進入vue部分，可以篩選版本,我這里使用的是2.7.10版本的，可以根據(jù)自己的需要選擇版本
以下是具體示例：
<head>
<meta charset="UTF-8">
<title>vue.js鏈接使用示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/vue/2.7.10/vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{msg1}}</h1>
<h1>{{msg2}}</h1>
</div>
</body>
<script>
const app = new Vue({
el:'#app',
data:{
msg1:'HUAWEI MATE 60 PRO',
msg2:'輕舟已過萬重山'
}
})
</script>
那么就可以在網(wǎng)頁上顯示了，當(dāng)然這只是一個小示例，不用在意細節(jié)
二、使用vue-cli初始化項目
安裝node.js的過程我就不說啦，大家可以參考下面這個帖子安裝node.js：
node.js安裝教程
1.npm設(shè)置淘寶鏡像源
使用npm時，有時經(jīng)常會卡住，有時又很慢，這時候我們可以更換為淘寶鏡像源安裝依賴包
npm config set registry https://registry.npm.taobao.org
然后運行下面的命令檢查是否切換成淘寶源
npm config get registry
由于我已經(jīng)切換了，那么可以檢查一下是否為淘寶源，發(fā)現(xiàn)已經(jīng)切換成功了
2.安裝vue-cli
以管理員身份運行命令提示符
輸入npm install -g @vue/cli(這里的install可以簡寫為i)
注意
我在這里想補充一些對于自主選擇vue-cli版本的問題，一般執(zhí)行上述安裝命令后，會自動下載一個版本，使用vue -V檢查一下
如果想自己選擇版本則需先卸載已經(jīng)安裝的版本，再重新指定
使用命令npm uninstall -g @vue/cli即可卸載
指定指令為npm i -g @vue/cli@5.0.4，記住，@后面的是版本號，比如我這里指定5.0.4版本
3.初始化項目
選擇一個你要將項目創(chuàng)建在哪個地方，比如我選擇的是D:\vuejslearn
就在這個地址欄輸入cmd，回車進入命令行，準(zhǔn)備開始創(chuàng)建項目
創(chuàng)建項目vue create vuetest,vuetest是我自己取的名字，這個可以自定義，反正就是你這個項目的名字，成功后就是下面的界面
這里我們選擇Manually select features自定義插件配置
這里我們就少選一點，看自己需要我這里就選Babel和Router
進入后我們就選2.x
接下來就是回答一些問題，由于我選的太快了就沒有留下截圖，反正接下來就是漫長的等待環(huán)節(jié)
出現(xiàn)如下頁面就說明創(chuàng)建成功了
文章來源：http://www.zghlxwxcb.cn/news/detail-705235.html
4.啟動項目
打開webstorm，打開我們剛剛創(chuàng)建的項目
在下方的terminal中輸入npm run serve 啟動項目
檢查一下項目是否啟動，在瀏覽器上面輸入http://localhost:8080/#/
看能否出現(xiàn)下面的頁面，如果有就成功初始化一個項目了
文章來源地址http://www.zghlxwxcb.cn/news/detail-705235.html
到了這里，關(guān)于初探Vue.js及Vue-Cli的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
