vue从开发环境搭建到建立到第一个项目-新手必看

（一) 关于mac

• 开发环境：
  Homebrew ( Mac的包管理神器 ) → Node.js → cnpm（淘宝镜像，节省安装时间） → webpack → vue-cli（vue脚手架） → IDE（ Vue开发我用的是VSCode ）

---

1. 打开terminal 安装homebrew
   /usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
2. 安装node.js

• 直接在node.js官网下载安装，全程傻瓜式安装。node.js是自带npm的，npm在后面安装别的环境需要用到。
• 安装完后，我们可以通过在terminal中输入 node -v ，npm -v 分别检查node.js 和npm 的版本--
• mac 这里需要注意！！要给npm安装目录访问权限，否则npm安装别的东西都会失败（至少我是这样子...）
  sudo chmod -R 777 /usr/local/lib/node_modules/

3. 安装cnpm
   在terminal里输入
   npm install -g cnpm --registry=https://registry.npm.taobao.org

4. 安装webpack
   cnpm install webpack -g
   在terminal中输入webpack -v检查是否安装成功以及查看版本号

5. 安装vue-cli
   npm install vue-cli -g
   在terminal中输入vue -V（注意这里是大写V）检查是否安装成功以及查看版本号

6. 安装VSCode

（二) 关于windows

https://www.cnblogs.com/zhaomeizi/p/8483597.html

很详细的步骤，一步一步的按照操作来，记得用管理员的terminal去运行npm的指令，管理员的terminal这样去打开。这样在加载淘宝镜像的时候可以不报错。

勾选对号

---

（三) 安装之后会依次填写一些关于项目的信息：

This will install Vue 2.x version of the template. 
For Vue 1.x use: vue init webpack#1.0 projectname
? Project name (projectname) 
? Project name projectname
? Project description (A Vue.js project) 
? Project description A Vue.js project
? Author Joe --------------------- 项目创建者
? Author Joe
? Vue build (Use arrow keys)
? Vue build standalone
? Install vue-router? (Y/n) --------------------- 是否安装Vue路由
? Install vue-router? Yes
? Use ESLint to lint your code? (Y/n) n ---------------------是否启用ESLint
? Use ESLint to lint your code? No
? Setup unit tests with Karma + Mocha? (Y/n)
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? (Y/n)
? Setup e2e tests with Nightwatch? Yes
vue-cli · Generated "projectname".
To get started: --------------------- 这里说明后续的三个步骤
cd projectname
npm install
npm run dev

1. 项目名称、关于项目的描述、作者名称

• 找一个放工程的文件夹，terminal cd 到该目录，mac下可以直接把文件夹拖到terminal ，会自动填入路径
• 使用vue-cli创建项目，需要注意项目的名字不能用中文
  vue init webpack-simple projectname
• 到选择Vue build方式时，有两种方式，第一种为standalone方式，第二种runtime-only为runtime方式。
  runtime 打包的是 /node_modules/vue/dist/vue.common.js
  standalone 打包的是 /node_modules/vue/dist/vue.js
  Vue2.0有两种Build的方式：the standalone build and the runtime-only build（独立构建和运行时构建）,可以知道：独立构建包括编译和支持template选项。但也要依赖于浏览器的API，所以不能用于服务端渲染。运行时构建不包括模板编译，并且不支持template选项，只能使用render选项。

2. 是否安装vue-router（是否安装路由）
3. 是否使用ESLint规范，ESLint 是用来检查我们写的 JavaScript 代码是否满足指定规则的静态代码检查工具。通过用 ESLint 来检查一些规则，我们可以统一代码风格规则，如：代码缩进用几个空格；是否用驼峰命名法来命名变量和函数名等。减少错误， 如：相等比较必须用 === ，变量在使用前必须被声明，在条件语句中不能使用赋值语句等。提高代码质量，如：函数最多有多少条件分支；最多有几个参数，代码块最多能嵌套多少层等。其他。如： 禁用 alert。这可以提高用户体验，因为 alert 框的外观不是那么好看，而且往往与网站的风格不搭，一般都会自定义 alert 框。
4. 是否建立单元测试代码，可以不建立

• 项目建立之后在对应的目录下就会出现你刚刚建立的文件夹，进入你建立的文件夹，执行$ cnpm i 命令，会自动安装一些vue项目需要的压缩包之类的文件。

---

（四) 创立完成之后会在项目文件夹下自动生成如下目录，用自己选择的IDE，例如Vscode直接打开该文件夹即可。

项目目录

（五) 详细的文件夹及文件介绍：

项目目录介绍

（六) 安装完成之后运行npm run dev命令运行项目，就可以在浏览器中浏览建立的最简单的vue项目了。

• 如果没有自动跳出来，记得在浏览器里输入localhost:8080

  
  
  

  vue页面

（七) 注意：这里是默认服务启动的是本地的8080端口，所以请确保你的8080端口不被别的程序所占用。

• 当然这个端口也是可以修改的，在根目录的config文件夹下有个index.js文件，除了修改端口，还可以根据需要改变其他配置信息。

  
  
  

  端口