Vue.js的介绍及安装
一、Vue.js的好处
两个字：响应
- 快速开发既豪华又省心的前端页面
- 还是省心与豪华
为啥省心呢？
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import Vue.js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script></script>
</head>
<body>
<div id="app">
{{ message }}
</div>
</body>
// 实例化 Vue
new Vue(
{
el: '#app',
data() {
return {
message: ''
}
},
created() {
this.message = '响应式 数字: ' + Math.random()
}
}
)
为啥会豪华呢？
这个派上 Vue的好基友ElementUI
只要经过简单的配置，就可以实现高大上样式css，例如以下的走马灯
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<!-- import ElementUI CSS -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- import Vue before Element 必须在element前导入vue.js-->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import ElementUI JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
<div class="block" style="width: 50%">
<span class="demonstration">响应式 数字</span>
<el-carousel height="150px" interval="1000">
<el-carousel-item v-for="item in message" :key="item">
<h3 style="text-align: center">{{ item }}</h3>
</el-carousel-item>
</el-carousel>
</div>
</div>
</body>
<!-- 这些样式在elementUI会提供-->
<style>
.el-carousel__item h3 {
color: #475669;
font-size: 14px;
opacity: 0.75;
line-height: 150px;
margin: 0;
}
.el-carousel__item:nth-child(2n) {
background-color: #99a9bf;
}
.el-carousel__item:nth-child(2n+1) {
background-color: #d3dce6;
}
</style>
// 实例化 Vue
new Vue(
{
el: '#app',
data() {
return {
message: []
}
},
created() {
for (let i = 0; i < 4; i++){
this.message.push('响应式 数字: ' + Math.random())
}
console.log(this.message);
}
}
)
二、安装
有多种方式进行安装，我主要讲npm安装，其余自行去官网
- npm安装
# 使用淘宝镜像，目的为了快
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 查看版本，若无显示，请看自己有没有配置环境
npm -v
# 升级或安装 cnpm
npm install cnpm -g
# 安装Vue
cnpm install vue
# Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。
# 全局安装 vue-cli
cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
vue init webpack project_name
# 然后会进行一些配置，看不懂默认回车即可
# 安装成功后出现如下画面
2. Vue项目运行
cd project_name
cnpm install
# 进入开发者环境，运行Vue
cnpm run dev
# 打开浏览器，输入http://localhost:8080 进入Vue欢迎界面
三、目录介绍
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件，加载各种公共组件
|-- static // 静态文件，比如一些图片，json数据等
| |-- css
| |-- html
| |-- js
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息,npm的包依赖安装信息
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
