vue起手式

时间 2019-12-12

标签 vue 手式繁體版

原文原文链接

许久不曾更新文章，虽然不是程序员但仍是忘怀不了撸码的觉悟.

1.VUE环境搭建

安装node.js (项目开发前准备) Node.js官网：https://nodejs.org/en/ 进入Node.js官网，选择下载并安装Node.js。安装过程只须要点击“下一步”便可，很是简单。 node.js安装完成后：验证Node.js是否安装好，在windows下，win+r召唤出运行窗口，输入cmd打开命令行窗口。(任意路径的cmd下)输入node -v便可获得对应的Node.js版本。 npm包管理器是集成在Node.js中了，因此在安装Node.js的时候就已经自带了npm。

npm -g install npm复制代码

安装cnpm (项目开发前准备) 安装完node以后，npm包含的不少依赖包是部署在国外的。因为资源的限制，安装npm依赖包的时候常常失败，建议使用npm的国内镜像cnpm 命令行工具代替默认的npm。 npm 国内镜像 https://npm.taobao.org/ 在(任意路径的cmd下)命令行中输入如下内容等待安装
```
npm install -g cnpm -registry=https://registry.npm.taobao.org复制代码
```
cnpm全局安装vue-cli (若用临时服务可全局安装 live –server,此步省略) 在(任意路径的cmd下)命令行中运行如下命令而后等待安装
```
cnpm install -g vue-cli 复制代码
```
安装完后，检查是否安装成功，输入vue，出现如下提示表示安装成功。
构建项目 (可直接在磁盘上建立文件夹，在编辑器中直接打开项目文件夹) 。新建项目先将vue项目建在f盘的vue-demo文件夹下，再利用命令进入此目录。在cmd中输入盘符f:回车便可进入F盘：输入命令 cd vuedemo跳到此目录下：

初始化一个项目：
在此目录下建立一个基于 webpack 模板的新项目,即在cmd中输入如下命令（若使用live-server则在新建项目后 npm init,初始化成功后根目录下多一个 package.json 文件）
```
vue init webpack my-vue-project复制代码
```
意思是初始化一个项目，利用的是webpack打包和压缩，此项目命名为my-vue-project。这样，my-vue-project文件夹就自动生成刚刚在指定的目录中，在初始化项目的过程当中，须要输入项目名、描述、做者等。
安装npm项目依赖 (若用live-server 此步可省略) cmd进入前端vue项目的根目录（在cmd中，注意须要使用命令先定位到my-vue-project目录下，定位命令：cmd –> 盘符: -> cd my-vue-project 而后输入命令cnpm install安装项目所需的依赖包资源
```
cnpm install 复制代码
```
执行完成后能够看到my-vue-project文件夹下多了一个node_modules文件
npm编译第一次运行前，要对项目进行编译，cmd进入前端vue项目的根目录，输入命令
```
npm run build复制代码
```
，此时会对根目录下的package.json对build命令的定义进行编译，通常"build" = "webpack -p"。
运行项目 cmd进入前端vue项目的根目录，使用命令
```
npm run dev复制代码
```
运行项目，此时会用nodejs启动这个前端的vue项目项目运行成功后浏览器能够用
```
localhost:8080复制代码
```
打开呈现如下页面。注意浏览器的版本，低版本的不支持哦。

2.VUE调试工具vue-devtools的安装与使用

在github上下载压缩包，github下载地址：github.com/vuejs/vue-d…，
解压到本地的磁盘找到文件vue-devtools/shells/chrome/manifest.json，修改persistent为true。
进入输入
```
npm install复制代码
```
以后等待下载项目依赖包, 而后目录下就会多出一个node-modules文件夹，里面就是项目所依赖的包，再进行
```
npm run build复制代码
```
npm run build这一步必定不要忘了，没有执行这一步的话，项目文件夹shells>chrome文件夹里会少一个src文件夹,以下图
咱们找到谷歌浏览器的扩展程序功能，勾选开发者模式，而后咱们将插件文件夹里的shells>chorme文件夹直接拖到页面中，完成安装。（注意：若是咱们没有执行第4部的
```
npm run build复制代码
```
，在这里会报错：没法加载背景脚本"build/background.js"）
在插件的目录下执行
```
npm run dev复制代码
```
，这个时候咱们的插件就能够运行了,打开localhost:8080能够看到插件已经安装并运行了。
咱们在打开本地的其余项目时，就不须要在vue-devtools文件夹下执行
```
npm run dev复制代码
```
了，由于这个插件已经安装在浏览器中。接下来就愉快的调试你的vue项目吧。

以localhost:8080访问项目时，只需在项目目录下执行如下代码

npm run dev win+r > 盘符： > cd 文件夹名称 > npm run dev复制代码

3.配置nginx(多个vue项目)

配置nginx：先后端分离项目通常都要解决跨域问题，配好nginx安装目录/conf/nginx.conf的server模块
配置项目主机地址：前端项目里须要有个config文件夹，里面要有host.js或者config.js文件，定义nginx转域后的主机地址+端口号（也就是nginx.conf里面server模块的server_name值+listen的端口号）。git项目拉下来没有的话本身加一个，文件内容范例下面用${}表示nginx.conf里面server模块对应的字段值
```
const host = 'http://${server_name}:${listen}/server/';
export {host};复制代码
```
配置windows的HOSTS：因为是在本机上启用前端项目，须要将127.0.0.1和nginx代理后的域名作对应。找到系统的HOSTS文件（win7系统下在C:\Windows\System32\drivers\etc里面），增长一条“127.0.0.1 ${server_name}”。不然本地启动前端项目后浏览器访问nginx代理后的域名会发生dns错误。

第一次配置好后，之后启动只用两步：

启动nginx 
进入前端项目根目录，cmd运行npm run dev复制代码

一个比较典型的用webpack管理的vue项目应该有以下文件和文件夹：

config/：定义代理的域名dist
dist/: 整个前端项目用webpack打包后的目标存放文件夹，里面通常有bundle.js文件
lib/: 开发时引用的一些依赖文件，最经典的就是jquery
node_modules/：上面介绍的用npm对项目依赖组件进行安装时就放在这个文件夹里。
src/：本身写的源代码
index.html：主页入口文件
package.json和webpack.config.js：这两个文件应该是组件依赖关系和管理打包的配置文件？
不太懂，反正没有是不能cnpm install、cnpm run build、cnpm run dev的。复制代码

4.开发环境

运行html

npm run dev复制代码

webpack配置文件为：前端

webpack.dev.conf.js复制代码

浏览器自动刷新：
vue

将webpack.dev.conf.js中的 hot设置为 false复制代码