[TOC]
什么是 Vue.js
Vue.js（读音 /vjuː/, 类似于 view） 是一套构建用户界面的渐进式框架。
Vue 只关注视图层， 采用自底向上增量开发的设计。
Vue 本身具有响应式编程和组件化开发的特点。
详细介绍请移步Vue中文官网
安装 vue.js
方式一：script标签直接引入
1、独立版本
直接下载 vue.js 并通过 <script> 标签引入
vue.js 下载地址
<script src="vue.js"></script>
2、CDN
推荐使用 unpkg 会保持和 npm 发布的最新的版本一致。
<script src="https://unpkg.com/vue/dist/vue.js"></script>
方式二：npm安装
cmd下执行以下命令
#查看npm版本（没有的请自行安装）
npm -v
#安装cnpm(这个速度快点)
npm install cnpm -g
#安装vue
cnpm install vue
#安装vue-cli
cnpm install --global vue-cli
#查看vue版本，显示正常显示，安装完成
vue -version
创建第一个vue项目
1、标签引入的方式
示例代码 helloVue.html ：
<!DOCTYPE html>
<html>
<head>
<title>第一个vue项目</title>
<meta charset="utf-8">
</head>
<!-- 引入vue.js -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<body>
<div id="app">
<span>{{message}}</span>
</div>
<script type="text/javascript">
new Vue({
el: "#app",
data: {
message: "Hello my first vue project"
}
});
</script>
</body>
</html>
2、vue命令创建项目
创建命令及运行方式
#创建项目(基于webpack模板)
vue init webpack hello-vue
#接下来一些输入配置信息（根据个人需求选择相应配置，默认一路Yes）
? Project name hello-vue
? Project description 项目的描述消息
? Author Negen
? Vue build standalone
? Install vue-router? No
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recommended) npm
vue-cli · Generated "hello-vue".
#等待现在完成，项目创建结束
#运行项目
#进入项目根目录
cd hello-vue
#启动项目命令
npm run dev
#出现这句话表示项目启动成功
I Your application is running here: http://localhost:8080
在浏览器输入 localhost:8080 出现如下界面
image.png
网友评论