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