vue环境搭建

环境搭建

vue推荐开发环境

Node.js：javascript运行环境(类比为python的解释器)，不同系统直接运行各种编程语言；
npm： Nodejs下的包管理器（可以类比为python中的pip）。由于国内使用npm会很慢，这里推荐使用淘宝NPM镜像（http://npm.taobao.org/）

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

webpack：它主要的用途是通过 CommonJS 的语法把所有浏览器端需要发布的静态资源做相应的准备，比如资源的合并和打包。
vue-cli：用户生成Vue工程模板

1.node.js安装

从node.js官网下载并安装node，安装过程很简单，一路“下一步”就可以了（傻瓜式安装）。
安装完成之后，打开命令行工具，输入 node -v，如下图，如果出现相应的版本号，则说明安装成功。

image.png

2. npm包安装

npm包管理器，是集成在node中的，所以，直接输入 npm -v就会如下图所示，显示出npm的版本信息。

image.png

3.cnpm安装

由于有些npm有些资源被屏蔽或者是国外资源的原因，会导致用npm安装依赖包的时候失败，所有我还需要npm的国内镜像—cnpm。
在命令行中输入 npm install -g cnpm --registry=http://registry.npm.taobao.org 然后等待，安装完成如下图。

image.png

完成之后，我们就可以用cnpm代替npm来安装依赖包了。

4.安装vue-cli脚手架构建工具

在命令行中运行命令 npm install -g vue-cli，然后等待安装完成。
通过以上三部，我们需要准备的环境和工具都准备好了，接下来就开始使用vue-cli来构建项目。

5.用webpack构建项目

要创建项目，首先我们要选定目录，然后再命令行中把目录转到选定的目录。这里是D:\Project，进入此目录下

image.png

执行命令vue init webpack vuetest，
这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中vuetest是整个项目文件夹的名称，这个文件夹会自动生成在指定的目录D:\Project中。

image.png

运行初始化命令的时候回让用户输入几个基本的选项，如项目名称，描述，作者等信息，如果不想填直接回车默认就好。
打开vuetest文件夹，项目文件如下所示。

image.png

这就是整个项目的目录结构，其中，我们主要在src目录中做修改。这个项目现在还只是一个结构框架，整个项目需要的依赖资源都还没有安装，如下图。

image.png

6. 安装项目所需的依赖

要安装依赖包，首先cd到项目文件夹（vuetest文件夹），然后运行命令 cnpm install ，等待安装。
安装完成之后，会在我们的项目目录文件夹中多出一个node_modules文件夹，这里边就是我们项目需要的依赖包资源。

image.png

7. 运行项目

安装完依赖包之后，就可以运行整个项目了。
在项目目录中，运行命令 npm run dev ，会用热加载的方式运行我们的应用，热加载可以让我们在修改完代码后不用手动刷新浏览器就能实时看到修改后的效果。

image.png

项目运行成功后，浏览器会自动打开localhost:8080（如果浏览器没有自动打开，可以手动输入）。运行成功后，会看到如下所示的界面。

image.png

我们写代码主要在src目录下。

image.png

src\App.vue相当于主组件，其他子组件需要挂载它里面。

<!--一个组件有三分部分组成 -->
<template>
  <!-- 页面结构-->
  <div class="app">  <!-- 这里最外层必须由一个元素包括，不能并排，否则报错，相当于一个组件一个区域，由一个大的包括起来 -->
    <h3>{{msg}}</h3>
    <Vheader></Vheader>
    <Vcontent></Vcontent>
    <Vfooter></Vfooter>
  </div>
</template>


<script>
  // 1. 先引入子组件
  import Vheader from './components/Vheader.vue'
  import Vcontent from './components/Vcontent'  // .vue可以省略不写
  import Vfooter from './components/Vfooter'


   //页面的业务逻辑
   export default {
     name: 'App',
     data(){
       return {
         msg: 'Hello vue 组件'
       }
     },
     methods:{

     },
     computed:{

     },
     // 挂载
     components:{
       Vheader: Vheader,
       Vcontent,
       Vfooter   // 如果key-value字段名一样，可以省略只写一个
     }
   }

</script>

在components目录下创建三个子组件

image.png

Vheader.vue

<template>
    <header class="nav">
        我是header
    </header>
</template>

<script>
    export default {
        name: 'Vheader',
        data(){
            return {

            }
        }
    }
</script>

<style scoped>  /*scoped表示css样式只作用于自身*/

</style>

Vcontent.vue

<template>
    <div class="content">
        我是content
    </div>
</template>

<script>
    export default {
        name: 'Vcontent',
        data(){
            return {

            }
        }
    }
</script>

<style>


</style>

Vfooter.vue:

<template>
    <footer class="foot">
        我是footer
    </footer>
</template>

<script>
    export default {
        name: 'Vfooter',
        data(){
            return {

            }
        }
    }
</script>

<style>


</style>

运行 npm run dev

image.png