Vue 学习笔记01 —— 开发环境搭建

1. 需要预先学习的知识点

• 前端基础
  1. html
  2. css
  3. javaScript
     （默认读者已经可以熟练使用这三个知识点）
• 前端 模块化 基础
• javaScript es6 语法基础

2. 需要的资源

node.js 官网： https://nodejs.org/zh-cn/
vue 官网：https://cn.vuejs.org
vue-router 官网: https://router.vuejs.org/zh-cn/
webStorm: http://www.jetbrains.com/webstorm/（可以使用自己熟悉的编辑器）

3. 环境配置

1. 下载最新的node.js 的最新的安装包并进行安装。
   推荐使用安装包安装，并安装 node 的稳定版本。安装包中自带 npm。

2. cnpm 安装（大中华局域网必备）
   npm 安装完成后，所有的 npm 命令中的 npm 替换为 cnpm (主要是npm 在国内使用非常的慢，不想浪费时间就替换为 cnpm)
   cnpm 官网: https://npm.taobao.org

   # cnpm 的安装指令
   $ npm install -g cnpm --registry=https://registry.npm.taobao.org
   

   如果由于文件夹访问权限问题，可能存在执行cnpm 指令时候出错。 请在命令前加 sudo
   如：
   $ sudo npm install -g cnpm --registry=https://registry.npm.taobao.org
   sudo 权限修复：
   如果你比较讨厌使用 sudo 。 修复完成后就不需要输入 sudo.
   可以修复 sudo 权限 => fixing-npm-permissions
   $ npm config get prefix
$ sudo chown -R $(whoami) $(npm config get prefix)/{lib/node_modules,bin,share}

3. vue 开发环境搭建

   官方命令行工具：
   可以快速的下载一个 vue 的开发模板。里面包含了vue 的基本框架，打包的工具，测试的工具，开发/调试的服务器。使用命令行工具可以省去自己配置项目，打包工具，测试工具，开发/调试的服务器的工作。重点关注在vue项目的开发上。

   # 全局安装 vue-cli
   $ cnpm install --global vue-cli
   

   命令执行完毕后， vue 开发环境就基本具备了。

4. 创建第一个示例项目

   # 创建一个基于 webpack 模板的新项目
   $ vue init webpack my-project
   

   

   Snip20171206_1.png

   
   

   所有的选项都是 enter 键

   # 切换到 my-project 文件夹
   $ cd my-project
   
   # 使用 npm 安装依赖的库文件
   $ cnpm install
   
   # 运行项目
   $ cnpm run dev
   
   # 三个指令可以一次运行
   $ cd my-project && cnpm install && cnpm run dev
   

   

   Snip20171206_2.png

   npm run dev 命令之后，需要自己手动将 http://localhost:8080/ 的链接输入到浏览器，这个链接就是我们本地开发的项目主页。

   

   Snip20171109_5.png

   开发完成后执行:

   $ npm run build
   

   会编译我们的源代码生成最终的发布代码，在dist目录下。

   到此，环境配置，项目的创建基本已经学会了。

   同时一个最简单的 vue 应用我们也有了。

5. 示例项目的文件结构

   

   Snip20171206_4.png

文件夹	说明
build	webpack的相关配置。
config	项目初始化配置目录。（设置端口，初学可以使用默认配置）
dist	项目编译后的静态文件 —— 生产项目（将这个文件打夹赋值放在服务器就可以完成部署了）
node_modules	npm install 命令执行后加载的项目依赖模库
src	项目开发目录(源码)： * assets(资源): 放置一些图片资源。 * components(组件): 存放组件文件。 * router(路由): 存放路由文件。 * App.vue: * main.js: 程序的入口
static	第三方静态资源
test	no
.babelrc	babel 编译的配置文件
.editorconfig	编辑器配置文件
.eslintignore	语法检查的忽略配置文件 默认忽略对 build/.js 和 config/.js 进行语法检查
.eslintrc.js	eslint 的配置文件
.gitignore	git仓库的忽略文件
.postcssrc.js	no
index.html	首页入口文件
package.json	项目的库依赖配置文件
README.md	项目说明文档