使用node搭建 Vue 开发环境
2018年11月14日1.开启国内镜像加速
|
1 |
> npm config set registry=https://registry.npm.taobao.org |
2.安装vue-cli
可以把vue-cli 理解为 vue的安装器 就像 laravel 有 laravel安装器一样,会用即可
|
1 |
> npm install --global vue-cli@2.9.3 |
3.使用vue-cli
使用命令查看一下可以选择安装的类型,
|
1 2 3 4 5 6 7 8 9 10 |
>vue list Available official templates: ★ browserify - A full-featured Browserify + vueify setup with hot-reload, linting & unit testing. ★ browserify-simple - A simple Browserify + vueify setup for quick prototyping. ★ pwa - PWA template for vue-cli based on the webpack template ★ simple - The simplest possible Vue setup in a single HTML file ★ webpack - A full-featured Webpack + vue-loader setup with hot reload, linting, testing & css extraction. ★ webpack-simple - A simple Webpack + vue-loader setup for quick prototyping. |
常用选项介绍:
- 『simple』：通过在一个 HTML 文件中引入 Vue 来使用它；
- 『browserify』 和 『webpack』： 分别使用 browserify 和 webpack 作为打包工具，并配置了对应的 Vue 组件转换工具和热加载等功能；
- 『pwa』(Progressive Web App)：一种基于前面的『webpack』的模板；
注：browserify 和 webpack 是前端常用的两种模块打包工具，它们会按需打包应用所需的模块。
4开始安装
|
1 2 |
> vue init webpack vuejs-essential 选择类型 项目名称 |
- Project name（项目名称） ：vuejs-essential
- Project description（项目描述） ：A Vue.js project
- Author（作者） ：Yuanmin Pu ryunpu@163.com
- Vue build standalone（Vue 构建方式） ：独立构建
- Install vue-router（安装 vue-router） ：no 不用
- Use ESLint to lint your code（使用 ESLint 检查代码） ：no 不用
- Set up unit tests（设置单元测试） ：no 不用
- Setup e2e tests with Nightwatch（设置 e2e 测试） ：no 不用
- Should we run npm install …（是否运行 npm install …）：选择
Yes, use NPM
|
1 2 |
cd vue2 npm install pug sass-loader node-sass --save-dev #安装预处理器 |
