vscode下面開發vue.js項目

vscode下面開發vue.js項目

 

http://www.javashuo.com/article/p-fscmdrgf-en.html

vscode下面開發vue.js項目

1.首先用官方vue-cli腳手架建立一個vue的集成環境（不會的請閱讀上一章節），目錄以下：

 

目錄結構介紹請閱讀博客： https://www.jianshu.com/p/2769efeaa10a

2.而後在src下面的components目錄（組件目錄）下面新建一個Test.vue文件（文件首字母要大寫）文件內容以下：

 

3.在router目錄下面（路由跳轉目錄）下的index.js頁面中添加，咱們剛纔添加的Test.vue頁面的跳轉路由。文件內如以下：

 

4.使用快捷鍵Ctrl+~鍵，就能夠出現命令行輸入頁面。以下所示：

 

5.命令行中輸入npm start 命令，以下所示：

 

若是成功後就會出現以下圖所示的信息：

 

想要中止的話能夠輸入快捷鍵Ctrl+C接能夠中止項目了，以下所示：

 

根目錄下面package.json文件是npm命令的集合文件，以下所示：

 

若是想要修改項目的端口地址的話，能夠去config下面的index.js進行修改。以下所示：

 

6.瀏覽器中輸入項目的啓動地址，看看是否配置成功。以下圖所示：

 

界面上要是看到咱們項目編寫的內容的話，就說明成功了。

這邊須要說一下的是：項目的全局vue名字叫作Vue.vue、啓動js文件是main.js