Vue-Hello Wolrd

一、基础环境搭建

1.安装Node.js并配置npm

2.安装 webpack（前端打包工具）

（1）安装 webpack

cnpm install webpack -g

（2）查看 webpack 版本号，检查是否安装成功

webpack -v

 3.安装 vue-cli（脚手架构建工具）

（1）安装 vue-cli

cnpm install vue-cli -g

（2）查看 vue-cli 版本号，检查是否安装成功

vue -V

        上述步骤就是对Vue项目的环境搭建，接下来我们就可以使用 vue-cli 脚手架工具进行Vue项目的构建了

二、创建项目

（1）在项目目录下，执行创建命令

vue init webpack ProjectName(项目名称)

（2）创建项目过程中，需要对项目名称、描述、作者等信息进行确认或者填写，案例如下

新手一定要先关闭ESLint检查，简直是噩梦

新手一定要先关闭ESLint检查，简直是噩梦

新手一定要先关闭ESLint检查，简直是噩梦

2.安装项目所需的依赖

（1）cd命令进入到项目的路径下，再执行命令

npm install

（2）运行项目

npm run dev

项目启动后会返回一个地址，将地址拷贝到浏览器地址栏，出现vue官网的欢迎页面，则一个Vue项目构建完成了。

（3）项目的目录和文件结构

3.小试牛刀 - 编写HelloWorld！

（1）在component目录下新建一个VueDemo.vue文件

仿照工程自带的HelloWolrd.vue

<template>
    <div>
        <h1>{{hello}}</h1>
    </div>
</template>
<script>
export default {
  name: 'VueDemo',
  data () {
    return {
      hello: 'hello world'
    }
  }
}
</script>

 （2）在router/index.js文件中对组件进行路由配置

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'
import VueDemo from '@/components/VueDemo'
Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/hello',
      name: 'VueDemo',
      component: VueDemo
    },
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }
  ]
})

（3）运行项目测试结果

在终端输入 npm run dev 命令运行项目，会返回一个地址，在浏览器中访问改地址，结果如下

 

4.打包上线

npm run build

说明：打包完成代码位于dist文件夹下

以上就是Vue项目的创建和基本使用，后续将会继续学习Vue的相关知识，并将学习过程中的收获和心得总结分享出来。