初识vue

整理了一份vue项目搭建的过程及vue项目的基本结构内容，如下所示。
由于邮箱内图片粘贴失败，图文详情也可以参看在线版的云笔记：
传送门：http://note.youdao.com/noteshare?id=33930617e84306b5a67695daad3002e4


一、环境搭建
1.依赖环境 nodejs环境
到node官网下载最新版nodejshttps://nodejs.org/zh-cn/ （可安装最新7.4.0版本）
安装过程中需注意，一定要将node安装到环境变量中
一路next安装。安装完毕后，在终端（cmd）即可查看node和npm的相应版本。
注：windows用户若提示node命令不存在，关闭下cmd重新打开即可。
只要npm大版本号大于3即可运行接下来的内容。


2.安装vue脚手架工具
打开终端，执行命令npm install -g vue-cli
执行完毕后，vue脚手架工具即安装完毕。


3.初始化vue项目
项目需要保存的目录，执行vue init webpack my-vue
此时，vue会自动下载基于webpack的vue项目脚手架，此过程会让用户去设置一些项目的基本信息，如下所示：
? Project name (my-vue) ---项目名称（文件夹名称）回车会执行括号内的内容
? Project description (A Vue.js project) ----项目的描述 回车会执行括号内的内容
? Author ——项目作者
>Runtime+Compoler----运行和编译（默认直接回车即可）
? Use ESLint to lint your code? (Y/n)----使用eslint进行代码审查（no，如果为yes，前期对于写es6代码的同学，会各种报错导致从入门到放弃。。）
? Setup unit tests with Karma + Mocha?(Y/n) ----单元测试（no）
? Setup e2e tests with Nightwatch? (Y/n) ---- e2e测试（no）


至此，一个机遇webpack的项目就简单搭建好了。


4.安装项目内的依赖组件
进到刚刚创建的文件夹内 cd my-vue
执行 npm install
执行 npm i vue-touch@next
此时npm会自动安装项目所依赖的包
当安装完成时，执行 npm run dev 
浏览器将自动打开http://localhost:8080/
至此，环境配置完毕。




二、项目结构
1、html入口文件
整个站点的html，只有根目录下的index.html一个html文件，此文件不需要动。
2、程序入口js文件
位于src文件夹下的main.js，是所有配置文件的导入口
3、组件
App.vue是程序的总入口模块，所有模块都将从此模块中引入。
components文件夹为各个子模块。按照功能划分模块。
4、静态资源
assets文件夹为静态资源文件夹，项目内通用的scss文件啊，图片文件啊，js文件都可以放在这里边，方便使用的时候调用。


尝试着修改下components下的hello.vue的内容，然后不用刷新，直接查看浏览器页面的状态吧！