2、Vue_快速入门

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>

3.结果 image.png