Vue官网：https://cn.vuejs.org/
一、安装
- 官网安装：https://vuejs.org/js/vue.min.js，然后用<script>导入
- Staticfile CDN（国内）: https://cdn.staticfile.org/vue/2.2.2/vue.min.js
- NPM方法
因为nmp是和Node.js一起安装的包管理工具，所以安装Node.js：
1.下载并安装：https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
2.查看node版本：node -v
3.查看npm版本（相当于pip）：npm -v
4.使用淘宝定制的cnpm代替默认的npm（国内用npm很慢）：npm install -g cnpm --registry=https://registry.npm.taobao.org
5.安装：cnpm install vue
6.Vue.js 提供一个官方命令行工具，可用于快速搭建大型单页应用。（vue-cli脚手架）
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可
This will install Vue 2.x version of the template.
7.进入项目，安装并运行：
$ cd my-project
$ cnpm install
$ cnpm run dev
DONE Compiled successfully in 4388ms
> Listening at http://localhost:8080
8.访问http://localhost:8080（Vue.js 不支持 IE8 及其以下 IE 版本）
-
如果使用npm安装创建项目，那么Vue.js目录结构如下：
目录结构1
主要的目录文件说明
- config：配置目录，包括端口号等，可以使用默认的
- node_modules：npm加载的项目依赖模块
- publc/index.html：首页入口文件，可以添加一些meta信息或统计之类的代码
- src：这里是要开发的目录，基本上要做的事情都在这个目录里。里面包含了几个目录及文件：
assets: 放置一些图片或字体文件，如logo等
components: 该目录放所有的组件文件（组件可理解成python的模块）
App.vue: 项目入口文件，主组件；也可以直接将组件写这里
main.js: 项目的核心文件 - static：放置静态资源，比如图片、字体等
- test：测试目录，不需要可删除
- .xxxx文件：一些配置文件，包括语法配置，git配置
- package.json：项目配置文件
- README.md：项目的说明文档，markdown 格式
还有一种方式，创建出来的vue结构目录和上面的不一样
下载并安装node.js：https://nodejs.org/dist/v10.16.3/node-v10.16.3-x64.msi
安装国内cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org安装vue-cli：
cnpm install -g @vue/cli-
安装工程项目
1.使用工具，比如webstorm创建vue项目（创建好后，工具会自动安装好vue工程目录文件）
2.dos命令窗口：先到目标目录，再vue create 项目名
3.gitbase：winpty vue.cmd create 项目名
这样所创建的目录结构是：
vue目录2 APP.vue根组件，看注释
<!-- template标签的内容是展示到页面的内容，也就是View -->
<template>
<div id="app">
<!-- 图片 -->
<img alt="Vue logo" src="./assets/logo.png">
<!-- 在父组件中，给子组件HelloWorld传值 -->
<HelloWorld msg="Welcome to Your Vue.js App"/>
</div>
</template>
<!-- 管理操作数据，ViwModel -->
<script>
// 导入所需要的子组件
import HelloWorld from './components/HelloWorld.vue'
export default {
// 定义当前组件名称
name: 'app',
// 声明子组件
components: {
HelloWorld
},
//数据，data函数
data(){
// 返回个对象
return {
//对象里可以有各种数据
}
}
}
</script>
<!-- 样式渲染 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
-
创建个子组件，然后在根组件APP.vue中使用它
1.在components目录下创建one.vue，内容如下：
<template>
<div id="p">
<!-- 插值表达式 -->
<p>{{message}}</p>
</div>
</template>
<script>
export default {
name: "one",
data(){
return {
message:"Hello,Vue"
}
}
}
</script>
<style scoped>
</style>
2.在根组件APP.vue使用one.vue
<template>
<div id="app">
<!-- <img alt="Vue logo" src="./assets/logo.png">-->
<!-- <HelloWorld msg='vue学习'/>-->
<!-- 3. 使用子组件（子组件名字的开标签和闭标签代表使用该子组件）-->
<one/>
</div>
</template>
<script>
// import HelloWorld from './components/HelloWorld.vue'
// 1.导入子组件
import one from './components/one'
export default {
name: 'app',
components: {
// HelloWorld,
one // 2.声明子组件
}
}
</script>
<!-- 样式渲染 -->
<style>
#app {
font-family: 'Avenir', Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
image.png
