Vue开发环境的搭建
Vue开发环境的搭建
- 1 基本方式
- 2 脚手架方式(vue2.0)
- 3 使用WebStorm集成环境创建vue-cli项目(vue3.0)
- 4 vue项目的目录结构(vue2.0)
1 基本方式
最基本的方式就是在页面文件中引入vue.js文件,步骤如下:
(1)引入vue.js文件(在自己创建的html文件中引入,以下使用001.html文件来举例)
创建001.html文件,在该文件中引入vue.js文件
<!-- 本地引入,需要在本地下载好vue.js文件 -->
<script src="../js/vue.js"></script><!-- 开发环境版本,包含了有帮助的命令行警告 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script><!-- 生产环境版本,优化了尺寸和速度 -->
<script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
(2)创建Vue实例,和页面中的DOM组件进行绑定
定义DOM:
<div id="app"><p>{{ msg }}</p></div>
定义model:
<script>var vm = new Vue({ // 创建实例el: '#app',data: {msg: '橘猫吃不胖'}})</script>
在浏览器中打开001.html文件,效果如下:
2 脚手架方式(vue2.0)
1、安装vue-cli。脚手架方式需要安装vue-cli,新建文件夹vue-demo,在当前文件夹的路径下打开cmd窗口,按照下面的命令全局安装vue-cli
# 全局安装
npm install vue-cli -g
可以查看安装的vue的版本号:
vue --version
2、利用vue-cli创建项目。使用以下指令在当前文件夹下创建项目:
# 创建vue2.0项目
vue init webpack 项目名称
使用该指令后,会出现一些提示:
? Project name # 项目名称
? Project description (A Vue.js project) #项目描述,可以直接回车
? Author # 作者,可以直接回车
? Vue build standalone # 直接回车
? Install vue-router? (Y/n) # 安装路由,一般选择y
? Use ESLint to lint your code? (Y/n) # 是否安装语法校验器,一般选择n
? Set up unit tests (Y/n) # 是否安装单元测试,可装可不装
? Setup e2e tests with Nightwatch? (Y/n) # 一般选择是
? Should we run `npm install` for you after the project has been created? (recommended) (Use arrow keys)
> Yes, use NPMYes, use YarnNo, I will handle that myself # 一般选择第一个Yes, use NPM
然后等待安装就可以。安装成功后会给我们显示启动的命令:
我们输入它给出的命令,就可以运行项目:
# myapp是创建项目时起的项目名称,每个人不一样
cd myapp
npm run dev
最后显示项目在http://localhost:8080可以运行,在浏览器中输入该地址,就可以看到以下效果:
3 使用WebStorm集成环境创建vue-cli项目(vue3.0)
打开WebStorm,选择File —> New —> Project
选择最底下的Vue.js,然后在location处修改合适的项目路径,点击create,就可以创建成功了,该方式创建的是vue3.0版本的项目。
4 vue项目的目录结构(vue2.0)
下面是使用脚手架方式创建的项目的目录结构:
build目录:项目打包(webpack)的配置信息
config目录:项目的配置文件目录
node_modules目录:项目的依赖模块
src:源程序目录
static:存放的静态资源文件
test:初始测试目录
index.html:项目入口页面文件
package.json:项目的配置文件
README.md:项目的说明文件
Vue开发环境的搭建相关推荐
- vue开发环境的搭建流程
1.首先要确保安装了node.js(node-v) 使用淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.全局 ...
- Vue开发环境快速搭建步骤
一.环境搭建步骤: 1.nodejs安装 下载安装包:https://nodejs.org/en/ 2.配置环境变量: Path 加上node.exe路径 NODE_PATH:F:\node\node ...
- vue开发环境搭建Mac版
一.前言 因工作缘故,需要做一个移动端app,面对2016下半年至今webapp最流行的三个技术React,angular,vue,三选一,如何先,经过前期的技术选型,最后决定使用vue.具体查看本人 ...
- laravel+vue开发环境搭建
From: https://www.jianshu.com/p/1c2cc11ba46f 描述 最近通过laravel在公司做了一些项目,但本身前端出身的我,总是感觉lphp开发过程中,前端写好页面, ...
- 初探webpack之从零搭建Vue开发环境
初探webpack之搭建Vue开发环境 平时我们可以用vue-cli很方便地搭建Vue的开发环境,vue-cli确实是个好东西,让我们不需要关心webpack等一些繁杂的配置,然后直接开始写业务代码, ...
- 面试官:自己搭建过vue开发环境吗?
开篇 前段时间,看到群里一些小伙伴面试的时候被面试官问到这类题目.平时大家开发vue项目的时候,相信大部分人都是使用 vue-cli脚手架生成的项目架构,然后 npm run install 安装依赖 ...
- Vue快速上手笔记2 - 开发环境的搭建
Vue快速上手笔记2 - 开发环境的搭建 CSDN:JcLee95 邮箱:291148484@163.com 专题目录:https://blog.csdn.net/qq_28550263/articl ...
- 168.Vue.js智能扫码点餐系统(二)【搭建Vue开发环境】2019.03.18
0.知识点 搭建开发环境 1.搭建Vue开发环境 2.安装vue-cli脚手架 安装命令 // 第一种: npm install --global vue-cli// 第二种 cnpm install ...
- 离线/内网环境下搭建vue开发环境
系列文章目录 第一讲 离线/内网环境下搭建vue开发环境 第二讲 内网环境运行maven项目 目录 外网环境搭建 一.安装nodeJS 二.安装vue依赖包 内网环境正式开始 准备工作: 一.安装no ...
- Vue 开发环境搭建(Mac 版)
Vue 开发环境搭建(Mac 版) 参考: https://www.jianshu.com/p/cc722eba1f46 https://www.runoob.com/w3cnote/vue2-sta ...
最新文章
- 【Qt】Log4Qt(四):周期性输出日志,并且限制日志文件数量
- maven项目的构建命令
- c# mvc5 view 多层_MVC5+EF6 入门完整教程13 -- 动态生成多级菜单
- (9) ebj学习: Jpa的增删查改,CURD方法监听和命名查询
- NOIP模拟——change
- CSS基础(part14)--定位
- 东方希望上云 告诉你数字化门槛儿到底有多高?
- 方舟game ini生成器_十一月 XGP 新增双平台游戏:《方舟:生产进化》等
- 第 8 天 多线程与多进程
- 逻辑回归模型_逻辑回归模型
- 老男孩教育每日一题-2017年4月10日-find命令题目
- matlab:绘制box函数和高斯函数曲线并进行傅里叶变换
- mysql ipk 编译_OpenWrt的ipk包安装
- Intellij IDEA与Eclipse对比
- 首份财报营收增长扭亏为盈,为何怪兽充电的出路依旧“迷雾重重”
- 基于LVM的磁盘管理
- CDH大数据平台 ERROR Heartbeating to 192.168.0.200:7182 failed
- DO、PO、VO、DTO、BO、POJO概念
- 关于sip呼叫成功后,对方立马挂断的情况说明
- 程序无法运行-报0xc000007d错误解决方法