zoukankan      html  css  js  c++  java
  • 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进行修改。如下所示:

    界面上要是看到我们项目编写的内容的话,就说明成功了。
    这边需要说一下的是:项目的全局vue名字叫做Vue.vue、启动js文件是main.js
     

    6.浏览器中输入项目的启动地址,看看是否配置成功。如下图所示:

    致力于前端技术学习与分享,会及时更新博客。
  • 相关阅读:
    Day 9 作业题(完成)
    Day 9 函数的初识1
    Day 8 集合与文件的操作
    Day 7 深copy和浅Copy
    Day6 ,周期末考试试题
    Day 6 编码的进阶
    Day5 作业(完成)
    Day 5 字典的操作
    Day4 作业
    Day 4 list 列表的使用方法
  • 原文地址:https://www.cnblogs.com/caoxueying2018/p/9678998.html
Copyright © 2011-2022 走看看