vue cli脚手架工具安装以及搭建vue项目
2017-11-01 15:47
239 查看
vue-cli 是一个官方发布 vue.js 项目脚手架,使用vue-cli 可以快速创建 vue 项目,GitHub地址是:https://github.com/vuejs/vue-cli
一、 安装 node.js
首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。
只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399
安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。
二、vue-cli
首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程
全局安装 vue-cli
?
借此也全局安装一个 webpack
?
你可以使用我们定制的 cnpm (gzip 压缩支持) 命令行工具代替默认的
或者你直接通过添加
建议使用alias方式 为了保持npm和cnpm版本一致!(自己在cmd下用alias时候不好使 应该用mobaXtem 命令行工具才可以)
如果安装失败,可以使用 npm cache clean 清理缓存,如果报错,后面加--force强制执行,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本
三、生成项目
首先需要在命令行中进入到项目目录,然后输入:
其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
vuedemo 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖(注意要在有package.json 的目标下运行)
然后启动项目(直接访问端口号可进入测试demo)
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js
四、打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后,可以输入 npm run build 来进行打包工作
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
项目上线时,只需要将 dist 文件夹放到服务器就行了。
一、 安装 node.js
首先需要安装node环境,可以直接到中文官网http://nodejs.cn/下载安装包。
只是这样安装的 node 是固定版本的,如果需要多版本的 node,可以使用 nvm 安装http://blog.csdn.net/s8460049/article/details/52396399
安装完成后,可以命令行工具中输入 node -v 和 npm -v,如果能显示出版本号,就说明安装成功。
二、vue-cli
首先还是介绍我们的脚手架工具,因为它能让我们省去大部分的配置时间,这里只给出简单步骤,保证你的命令顺利运行的前提是安装最新版本的 node 和 npm,这里不赘述升级流程
全局安装 vue-cli
?
?
npm:
$ npm install -g cnpm --registry=https://registry.npm.taobao.org
或者你直接通过添加
npm参数
alias一个新命令:
alias cnpm="npm --registry=https://registry.npm.taobao.org \ --cache=$HOME/.npm/.cache/cnpm \ --disturl=https://npm.taobao.org/dist \ --userconfig=$HOME/.cnpmrc"
建议使用alias方式 为了保持npm和cnpm版本一致!(自己在cmd下用alias时候不好使 应该用mobaXtem 命令行工具才可以)
如果安装失败,可以使用 npm cache clean 清理缓存,如果报错,后面加--force强制执行,然后再重新安装。后面的安装过程中,如有安装失败的情况,也需要先清理缓存
同样可以使用 cnpm -v 查看是否安装成功
然后使用 cnpm 安装 vue-cli 和 webpack
cnpm install -g vue-cli
最新的 vue 项目模板中,都带有 webpack 插件,所以这里可以不安装 webpack
安装完成后,可以使用 vue -V (注意 V 大写)查看是否安装成功。
如果提示“无法识别 'vue' ” ,有可能是 npm 版本过低,可以使用 npm install -g npm 来更新版本
三、生成项目
首先需要在命令行中进入到项目目录,然后输入:
vue init webpack vuedemo1
其中 webpack 是模板名称,可以到 vue.js 的 GitHub 上查看更多的模板https://github.com/vuejs-templates
vuedemo 是自定义的项目名称,命令执行之后,会在当前目录生成一个以该名称命名的项目文件夹
配置完成后,可以看到目录下多出了一个项目文件夹,里面就是 vue-cli 创建的一个基于 webpack 的 vue.js 项目
然后进入项目目录(cd Vue-Project),使用 cnpm 安装依赖(注意要在有package.json 的目标下运行)
cnpm install
然后启动项目(直接访问端口号可进入测试demo)
npm run dev
如果浏览器打开之后,没有加载出页面,有可能是本地的 8080 端口被占用,需要修改一下配置文件 config>index.js
四、打包上线
自己的项目文件都需要放到 src 文件夹下
项目开发完成之后,可以输入 npm run build 来进行打包工作
npm run build
打包完成后,会生成 dist 文件夹,如果已经修改了文件路径,可以直接打开本地文件查看
项目上线时,只需要将 dist 文件夹放到服务器就行了。
相关文章推荐
- vue.js开发环境搭建以及脚手架工具安装
- vue.js开发环境搭建以及脚手架工具安装
- 使用vue脚手架工具搭建vue-webpack项目
- 使用vue脚手架工具搭建vue-webpack项目
- 详解使用vue脚手架工具搭建vue-webpack项目
- vue-cli webpack模板项目搭建以及打包时路径问题的解答
- vue开发环境搭建以及项目创建
- VUE2.0的简单入门(一)-安装node.js环境搭建与项目构建
- vue2.0项目快速搭建工具——vue-cli
- 【23】使用vue-cli脚手架搭建webpack项目基本结构
- vue2.0项目笔记系列(1)——搭建Vue脚手架(vue-cli)
- 脚手架搭建react和Vue项目
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
- vue-cli脚手架搭建的项目怎么去除eslint验证
- vue.js学习02之vue-cli脚手架创建项目环境搭建
- Vue.js 介绍及其脚手架工具搭建
- 利用vue-cli脚手架搭建项目时,在我入门时开启了eslint 一直报黄色的警告 有时候非常的烦恼 所以我要去掉它
- Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(二)安装 nodejs 环境以及 vue-cli 构建初始项目
- 项目的快速搭建以及工具的配置
- MacBook Pro 下vue项目开发环境搭建,安装和配置apache