Vue从开发到部署

Vue从开发到部署

1. 用vue-cli搭建一个vue项目

什么是vue-cli：

vue-cli是官方提供的一个脚手架，用于快速生成一个vue的项目模板；给我们预先定义好一个目录结构以及基础代码，就好比用maven构建一个骨架项目，我们在这个骨架上编写我们的代码。

主要的功能有：

统一目录结构、本地调试、热部署、单元测试、集成打包上线等。

需要的环境：

• Node.js 下载地址：http://node.js.cn/download/
• Git 下载地址：http://git-scm.com/downloads

具体的安装配置步骤就不逐一解释了，网上搜安装步骤都有。

确认node.js安装成功：

• cmd 下输入 node -v，查看是否能打印出版本号，有版本号说明安装成功了

安装npm：

• npm 是一个软件包管理工具，就好比我们用maven的时候安装依赖，和npm功能一样的有cnpm,这两个的区别就是npm使用的国外镜像，在安装包依赖的时候下载速度会很慢，如果是cnpm可以用淘宝镜像，下载包依赖就会比较比较快
• 安装了Node.js会自带npm 查看npm是否是安装了就使用npm -v能打印版本号说明安装成功了

# -g 就是全局安装 cnpm 里面使用的就是淘宝镜像
npm install cnpm -g

# 或者使用如下语句解决 npm 速度慢的问题 这个需要每次安装的时候都带上这个淘宝镜像相当于把每次安装就没有走npm的镜像 
# 也可以在npm的配置文件中把镜像改为淘宝镜像，但是不建议，建议能用npm就用npm安装，
# 有时候淘宝镜像或者cnpm安装的依赖能用但是打包运行的时候会失败
npm install --registry=https://registery.npm.taobao.org

安装vue-cli：

npm install vue-cli -g
# 测试是否安装成功
# 查看可以基于哪些模板创建vue应用 通常我们用webpack：它能将vue的ES6语法打包降级为ES5语法，能让项目有更好的兼容性
vue list

创建一个vue-cli应用程序：

1. 创建一个vue项目，我们随便建立一个空文件夹在电脑上面，我这里创建的目录为F:\myproject\vue

2. 创建一个基于webpack模板的vue应用程序

   # 这里的 myvue是项目名称，可以根据自己的需求起名
   vue init webpack myvue
   

   

3. 初始化并运行

   cd myvue #进入项目目录
   npm install  #安装依赖
   npm run dev #运行项目
   # 这几步都可以切换到WebStorm上面执行 也可以用 VS Code