Vue.js 初探

• vue 环境安装
• vue 项目初始化
• vue 项目结构

vue 环境安装

vue需要npm命令安装
安装node环境，node环境自带npm。（LTS稳定版）

node官网
终端打印下，能查看版本号就是安装成功。

node -v  // v8.11.2
npm -v   // 5.6.0
// node安装成功后，接着就安装vue
npm install vue
vue --version   // 2.9.3

vue 项目初始化

使用vue-cli脚手架，可以快速生成H5项目

// 全局安装vue-cli脚手架
npm install --global @vue/cli
// 初始化项目（默认项目会在根目录下，你可CD到指定目录再初始化项目）
vue init webpack 项目名称

项目配置

linzijiedeMacBook-Pro:~ linzijie$ vue init webpack 项目名称  // 初始项目

? Project name XXX  // 项目名称
? Project description A Vue.js project  // 项目描述
? Author linsangeng  // 项目作者
? Vue build standalone
? Install vue-router? Yes  // 安装路由？
? Use ESLint to lint your code? No  // 安装语法规范提示？
? Set up unit tests No  // 安装单元测试？
? Setup e2e tests with Nightwatch? No  // 安装e2e测试？
? Should we run `npm install` for you after the project has been created? (recom mended) (Use arrow keys)  // 安装包管理器？
❯ Yes, use NPM
  Yes, use Yarn
  No, I will handle that myself

安装完成后，cd项目目录，执行npm run dev。这样我们就能在本地浏览器输入http://localhost:8080，就能看到渲染后的页面

vue初始化成功

另外，项目是支持热更新的，只要你在本地修改后保存，本地页面就是刷新展示，是不是很方便呢！

本地修改
热更新后

vue 项目结构

vue项目

• build - webpack打包
• config - webpack配置
• node_modules - 本地npm包
• src - 项目文件，我们画的页面都会放在这个文件夹下
• static - 放置引用文件，比如jq
• index.html - 单页面，所以就一个页面