Vue.js

Vue开发环境搭建

By timebusker on January 18, 2019

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

Vue.js是当下很火的一个JavaScript MVVM库，它是以数据驱动和组件化的思想构建的。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js。

如果你之前已经习惯了用jQuery操作DOM，学习Vue.js时请先抛开手动操作DOM的思维，因为Vue.js是数据驱动的，你无需手动操作DOM。它通过一些特殊的HTML语法，将DOM和数据绑定起来。一旦你创建了绑定，DOM将和数据保持同步，每当变更了数据，DOM也会相应地更新。

当然了，在使用Vue.js时，你也可以结合其他库一起使用，比如jQuery。

node.js

下载node.js安装包（压缩包），并配置环境变量。

# 下载地址
https://nodejs.org/en/download/

# 设置缓存文件夹(先新建文件夹)
npm config set cache "D:\SoftWare\node-v10.15.0-win-x64\node_cache"
# 设置全局模块存放路径(先新建文件夹)
npm config set prefix "D:\SoftWare\node-v10.15.0-win-x64\node_global"

# 配置环境变量
# 运行nodejs
NODE_HOME=D:\SoftWare\node-v10.15.0-win-x64
# 运行全局组件
NODE_GLOBAL="D:\SoftWare\node-v10.15.0-win-x64\node_global"
path=%NODE_HOME%\;%NODE_GLOBAL%\;	

# 基于node.js,利用淘宝npm镜像安装相关依赖（-g/-global 全局）
npm install -g cnpm –-registry=https://registry.npm.taobao.org

vue.js

安装全局vue-cli脚手架,用于帮助搭建所需的模板框架。

# 命令行安装（-g/-global 全局）
cnpm install -g vue-cli

# 测试vue
vue

创建vue项目

# 基于webpack模板创建项目
vue init webpack vue-test

# 启动测试项目
npm run dev

vue-cli安装目录详解

  • build： 项目构建的一些代码以及最终发布代码的存放位置。
  • config： 开发环境的配置，包括端口号等。我们初学可以使用默认的。
  • node_modules： 这是执行npm install后产生的，里面包含了Node.js和npm依赖的文件以及后续安装的第三方组件或者第三方功能。
  • src：我们要开发的目录，用于存放页面相关的文件，基本上要做的事情都在这个目录里。其中还包含了以下几个目录及文件:
  • assets：放置一 些图片，如: Logo等;
  • components：存放了一-个组件文件，可以不用，
  • App.vue：是我们的主文件，项目入口文件，我们也可以直接将组件写这里，而不使用components目录，
  • main.js：项目的核心文件;
  • router：其中包括的index.js,则是项目的路由;
  • static：一般用于存放静态资源，如图片、字体等。
  • .babelrc文件：ES6编译的一些配置。
  • package.json：配置项目依赖模组
  • package-lock.json：更详细的package.json
  • .editorconfig：代码风格配置文件
  • .postcssrc.js：转换CSS样式的控制
  • index.html：入口页面
目录