说明
- vue.js可以直接在html中引入
- 为了打包成工程,可以使用 npm,这里就是下文的讲解内容
- 所有的代码都是在命令行中输入或者粘贴上即可
前期的准备
命令行工具
- window自带的cmd
- git的Bash
git Bash 粘贴不是Ctrl + V 而是 Insert键 (一般都在方向键上面)
运行环境
node.js 和 npm
vue打包等功能都是基于node.js的,因此必须安装node.js
根据硬件版本选择不同的安装包,现在一般都是64bit
傻瓜式安装,除了选择一下安装目录,其它都是下一步
node.js下载地址
node.js 现在安装后自带 npm
但是要自己检查一下,在命令行中输入
node -v
npm -v
修改镜像
国内访问很慢,因此需要使用镜像
npm config set registry=https://registry.npm.taobao.org
安装cnpm,之后的安装命令和npm相同
npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue
注意
执行
vue init webpack my-project
初始化工程时.
注意默认当前位置,所以如果想在指定目录下初始化
- window cmd: e: 到e盘,然后 cd vue 到指定目录,在执行命令
- git Bash : 右键文件 选择 Git Bash 直接输入命令
命令
# 全局安装 vue-cli
$ cnpm install --global vue-cli
# 创建一个基于 webpack 模板的新项目
$ vue init webpack my-project
# 这里需要进行一些配置，默认回车即可 遇到询问yes or no
# 直接都点yes
This will install Vue 2.x version of the template.
For Vue 1.x use: vue init webpack#1.0 my-project
? Project name my-project
? Project description A Vue.js project
? Author runoob <[email protected]>
? Vue build standalone
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Setup unit tests with Karma + Mocha? Yes
? Setup e2e tests with Nightwatch? Yes
初始化后,会有下图的目录结构
但是还需要执行下面的命令,才能运行
# 安装
cnpm install
# 运行
cnpm run dev
- 默认的端口号为 8080
- 在工程目录下 config/index.js 中修改端口号等配置信息
打开地址
http://127.0.0.1:8080/#/
参考文章:
vue的安装
npm的镜像
git安装教程
cnpm
nvm node npm webpack vue-cli 安装流程