Vue环境的搭建

Vue的环境搭建

1、进入node.js官网

https://nodejs.org/en/     进行下载

• 可以通过node -v 查看版本

• npm会自动安装 npm -v 可以查看

2、cnpm 全局安装淘宝镜像

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

3、安装 Vue CLI 脚手架

cnpm install -g @vue/cli

4、查看是否安装成功

vue -V

5、下载速度慢的解决办法

• 查看下载的版本号
• node .js 镜像 http://npm.taobao.org/mirrors/node/
• 查找对应的版本号，找到适合自己的电脑的版本下载

安装 webpack

cnpm install webpack -g

创建项目

进入工作的目录

vue init webpack 项目名称

会提示

• download template

• ? Project name (项目名) //小括号中即为我们已经指定的项目名称

• ? Project description (A Vue.js project) //项目描述

• ? Author //输入作者的信息

• Runtime + Compiler: recommended for most users
    Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed
   in .vue files - render functions are required elsewhere
  

  //此时使用上下箭头(方向键)即可切换其中的 “Runtime + Compiler” 和 “Runtime-only” 两种模式。

  //这里建议选择 “推荐给大多数用户” ( “recommended for most users” )的选择: “Runtime + Compiler” ，回车即可进入下一步。

• Install vue-router? (Y/n) //是否安装vue-router 输入y后回车，表示安装

• Use ESLint to lint your code? (Y/n) //是否需要ESLint进行代码风格检测

• Standard (https://github.com/standard/standard)
    Airbnb (https://github.com/airbnb/javascript)
    none (configure it yourself)
  

  //其中:

  Standard 表示 JavaScript 的标准风格

  AirBNB 表示JavaScript最合理的方法

  none (configure it yourself) 这个不用说，自己定义风格

  可以根据自己的编码风格来选择，也可以采用默认值 “Standard” 。

• ? Set up unit tests (Y/n) //是否需要单元测试 输入y回车，进入下一步

• Jest
    Karma and Mocha
    none (configure it yourself)
  

  这里选择 “Karma and Mocha” 后回车即可进入下一步

• ? Setup e2e tests with Nightwatch? (Y/n) //询问是否安装e2e测试 ，直接回车安装即可

• Yes, use NPM
    Yes, use Yarn
    No, I will handle that myself
  

  //这里我们选择 Yes, use NPM 后回车即可

• 这时候就开始构建项目了，等项目构建完成

进入建好的项目目录

以下简单介绍各个目录及文件的作用:

• .babelrc 是babel配置文件
• .editorconfig 是编辑器配置文件
• .gitignore 是Git管理忽略文件配置
• .postcssrc.js 是postcss配置文件
• build 是用于存放生产、开发环境配置产出文件的目录
• config 是用于存放生产、开发环境配置基础文件的目录
• index.html 是HTML模板文件
• node_modules 是NPM依赖包所在的目录
• package-lock.json 是存放项目依赖版本等信息文件
• package.json 是项目依赖配置文件
• README.md 是markdown说明文档
• src 是项目源文件所在的目录
• static 是存放静态文件的目录
• test 是存放测试文件的目录

安装依赖

在已经初始化好的项目目录内部，通过 cnpm -install 或 npm -install 来安装模块。其主目的是根据当前项目中的package.json配置来安装依赖关系，并将依赖关系安装到当前项目的 node_modules 目录中。

运行项目

cnpm run dev

http://localhost:8080 即可访问默认的首页