松鼠乐园 松鼠乐园
  • 注册
  • 登录
  • 首页
  • 快捷入口
    • Vue
    • Tensorflow
    • Springboot
    • 语言类
      • CSS
      • ES5
      • ES6
      • Go
      • Java
      • Javascript
    • 工具类
      • Git
      • 工具推荐
    • 服务器&运维
      • Centos
      • Docker
      • Linux
      • Mac
      • MySQL
      • Nginx
      • Redis
      • Windows
    • 资源类
      • 论文
      • 书籍推荐
      • 后端资源
      • 前端资源
      • html网页模板
      • 代码
    • 性能优化
    • 测试
  • 重大新闻
  • 人工智能
  • 开源项目
  • Vue2.0从零开始
  • 广场
首页 › Vue2.x从零开始 › 搭建第一个Vue工程

搭建第一个Vue工程

迦娜王
3年前Vue2.x从零开始
3,114 0 0

搭建第一个Vue工程

创建项目的方式有多种,这里主要介绍了3种方法。分别是通过UI搭建(UI是vue3.0以上的脚手架才支持的),通过vue create创建,通过vue init创建(这种方式我们后面再做介绍)。

可视化UI创建项目

vue3.0以上的脚手架推出了UI界面。因此可以通过该UI来创建项目。

  1. 在终端(命令行)输入vue ui启动UI。
    命令行会输出以下内容,同时会自动打开浏览器,
🚀  Starting GUI...
🌠  Ready on http://localhost:8000

如果浏览器没有自动打开,那么手动打开浏览器,在地址栏中输入http://localhost:8000即可打开。浏览器中的画面如图:file

  1. 创建项目。
    点击创建,然后点击在此创建新项目,然后输入项目文件夹,包管理器选择yarn,其他默认即可,然后点下一步即可。在预设界面,选择默认即可,然后点击创建项目,此时会自动拉取项目相关的所有文件,并且会自动安装依赖。

  2. 运行项目
    运行项目的方式有2种,本质上其实只有一种。

    • 通过图形界面运行

    file

    • 通过终端运行

    打开终端cd ./my-project,然后 输入yarn serve即可运行。

终端创建项目

这种方式是比较常用的方式,虽然没有界面,但是简洁高效。

  1. 创建项目
    打开终端,cd Desktop/,这个目录自行选择,然后输入vue create my-project,此刻会显示
Vue CLI v3.2.3
┌───────────────────────────┐
│  Update available: 3.5.1  │
└───────────────────────────┘
? Please pick a preset: (Use arrow keys)
❯ default (babel, eslint) 
  Manually select features 

默认已经选择default,回车即可。然后选包管理工具,默认会选择yarn,如果不是请用键盘上的上下方向键选择,然后回车,等待自动安装。

  1. 运行项目
    打开终端cd ./my-project,然后 输入yarn serve即可运行。如果你还是想用UI来启动项目,你可以启动UI然后导入该项目,剩下的和可视化UI创建项目中的运行方式是一样的了。

终端启动成功界面

 DONE  Compiled successfully in 3107ms                                                      08:48:46

  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://172.20.10.2:8080/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

浏览器中查看页面

在浏览器中输入http://localhost:8080/即可查看:
file

介绍一下vue的项目结构

在开始介绍之前,我推荐大家使用WebStorm进行开发。后面所有的讲解都会使用WebStorm。
现在我们用WebStorm打开my-project,你看到的项目结构如图:
file

  • node_modules 依赖目录
  • pubic 静态资源的目录,发布后public默认是根目录
    • index.html 项目入口页面
  • src vue源代码目录
    • assets 存放晓得资源
    • components 存放一些组件
    • App.vue 跟组件
    • main.js 应用入口
  • package.json 项目依赖

其他的相关文件暂时可以不用关注,届时需要用到了再去关注,查找资料即可。

发布

发布比较简单,我们在终端cd到项目目录,运行yarn build命令,等运行完成后会生成dist目录,该目录就是我们发布后的产物,只要把dist目录下的文件复制到服务器上就可以运行了。

防坑指南:直接发布的文件只能放到根目录下,放在子目录下会出现问题。如果需要放到子目录下,那么还需要配置一下,在my-project项目根目录下创建一个名为vue.config.js的配置文件,内容如下:

module.exports = {
    baseUrl:'/project'
}

现在我们重新运行项目,发现控制台输出结果变了:

 DONE  Compiled successfully in 1872ms                                                                                                                                    9:49:45 AM

  App running at:
  - Local:   http://localhost:8080/project/ 
  - Network: http://172.20.10.2:8080/project/

  Note that the development build is not optimized.
  To create a production build, run yarn build.

访问的地址后面都加了一个project,现在我们可以部署到服务器根目录下的project文件夹内了。

小结

这样开发vue项目,我们不需要每次修改都要手动刷新页面,框架会自动刷新,部分修改需要手动刷新。

0
本文系作者 @迦娜王 原创发布在 松鼠乐园。未经许可,禁止转载。
安装vue
上一篇
{{}}的使用
下一篇
评论 (0)

请登录以参与评论。

现在登录
  • 搭建第一个Vue工程
  • 可视化UI创建项目
  • 终端创建项目
  • 终端启动成功界面
  • 浏览器中查看页面
  • 介绍一下vue的项目结构
  • 发布
  • 小结
相关文章
router的使用
watch属性的使用
computed属性的使用
vuex的简单使用
松鼠乐园

资源整合,创造价值

小伙伴
墨魇博客 无同创意
目录
重大新闻 Centos CSS Docker ES5 ES6 Go Java Javascript Linux Mac MySQL Nginx Redis Springboot Tensorflow Vue Vue2.x从零开始 Windows 书籍推荐 人工智能 前端资源 后端资源 壁纸 开源项目 测试 论文
Copyright © 2018-2022 松鼠乐园. Designed by nicetheme. 浙ICP备15039601号-4
  • 重大新闻
  • Centos
  • CSS
  • Docker
  • ES5
  • ES6
  • Go
  • Java
  • Javascript
  • Linux
  • Mac
  • MySQL
  • Nginx
  • Redis
  • Springboot
  • Tensorflow
  • Vue
  • Vue2.x从零开始
  • Windows
  • 书籍推荐
  • 人工智能
  • 前端资源
  • 后端资源
  • 壁纸
  • 开源项目
  • 测试
  • 论文
热门搜索
  • jetson nano
  • vue
  • java
  • mysql
  • 人工智能
  • 人脸识别
迦娜王
坚持才有希望
1224 文章
35 评论
242 喜欢
  • 0
  • 0
  • Top