Mac环境下搭建VUE项目 （vue-cli3.x新版本&& vue-cli2.x版本）

Mac环境下搭建VUE项目 （vue-cli3.x新版本&& vue-cli2.x版本）

操作系统：macOs
系统版本：10.14.6

1.安装node，npm环境

你可以通过以下两种方式在 Mac OS 上来安装 node：

1、在官方下载网站下载 pkg 安装包，直接点击安装即可。
2、使用 brew 命令来安装：
Homebrew官网

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"

可用国内镜像

/bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"

详情链接 ，Homebrew国内如何自动安装（国内地址）

brew install node

检查版本，和是否安装成功

192:~ jennifer$ npm -v
6.14.7
192:~ jennifer$ node -v
v14.7.0

2.搭建vue项目环境

vue-cli3.0新版本

1、全局安装vue-cli

如果安装过Vue-cli旧版本可删除

npm uninstall vue-cli -g

安装新版本

npm install -g @vue/cli

检测Vue版本

192:vuetest jennifer$ vue -V
@vue/cli 4.4.6

2、进入你的项目目录，创建一个基于 webpack 模板的新项目:

vue create vuedemo1

选择手动配置

Vue CLI v4.4.6
? Please pick a preset: 
  default (babel, eslint) 
❯ Manually select features 

TypeScript 支持使用 TypeScript 书写源码
Progressive Web App (PWA) Support PWA 支持。
Router 支持 vue-router 。
Vuex 支持 vuex 。
CSS Pre-processors 支持 CSS预处理器。
Linter / Formatter 支持代码风格检查和格式化。
Unit Testing 支持单元测试。
E2Eesting 支持 E2E 测试。

Vue CLI v4.4.6
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-proce
ssors
? Use history mode for router? (Requires proper server setup for index fallback 
in production) No
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported 
by default): Stylus
? Where do you prefer placing config for Babel, ESLint, etc.? In dedicated confi
g files
? Save this as a preset for future projects? (y/N) n

3.进入项目： cd vuedemo1

4、npm run serve，启动项目
浏览器访问：localhost:8080

vue-cli2.0版本

1、全局安装vue-cli
如果安装过Vue-cli旧版本可删除

npm uninstall vue-cli -g

npm install --global vue-cli

2、进入你的项目目录，创建一个基于 webpack 模板的新项目:

vue init webpack vuedemo3

jennifer@Rock's iMac vuetest % vue init webpack vuedemo3

? Project name vuedemo3
? Project description A Vue.js project
? Author Jennifer <981815087@qq.com>
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? No
? Set up unit tests No
? Setup e2e tests with Nightwatch? No
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "vuedemo3".

3.进入项目

jennifer@Rock's iMac vuetest % cd vuedemo3

jennifer@Rock's iMac vuedemo3 % npm run dev

3.vue项目目录