vue学习笔记---搭建vue环境

• vue和Angular,React都是前端框架
  1. 单页面框架
  2. 基于模块化组件化的开发模式
• vue是国人大牛开发的,具有简单灵活高效的特点.

搭建vue开发环境

• 必须拥有node.js
• 安装vue的脚手架工具,也就是vue的命令行工具(新版本的脚手架和旧版本的脚手架创建项目方式会不一样)

老版本:npm install --global vue-cli  /   cnpm install --global vue-cli         （此命令只需要执行一次）
新版本:cnpm install -g @vue/cli

• cnpm是淘宝NPM定制的命令行工具代替默认的 npm:
• 添加cnpm的方式为:

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

• 创建项目,进入到一个目录之中

vue init webpack 项目名称

• 此时要进行一些选项
  1. 确认项目名称
  2. 编写项目描述
  3. author:确认作者名称
  4. vue build :默认
  5. Install vue-router:是否要安装这个插件,默认安装
  6. use ESLint to lint your code?:询问是否安装代码检查插件,建议不要安装,否则编写代码时会非常麻烦
  7. setUp e2e tests with Nightwatch?:安装测试
  8. 是否要使用npm:默认使用

• 如果创建项目中出现错误,说明项目没有成功安装依赖,需要手动安装项目依赖

• 如果项目创建中出现错误,进入到项目目录中执行以下命令

cnpm install   /  npm install     

• 启动项目

npm run dev

• 项目访问路径

http://localhost:8080

• 另一种创建项目的方式,这种方式创建时,不会询问太多的选项,创建出来的项目目录结构也更加的简洁

vue init webpack-simple vue-项目名称