Vue在Windows系统下本地项目的安装与部署

Vue在Windows系统下本地项目的安装与部署

一、项目的前期准备

1、node.js 的安装

Vue项目通常通过webpack工具来构建，而webpack命令是依赖node.js开发环境的，所以首先要安装node.js。node.js的官方地址为：https://nodejs.org/en/download/，下载相应的版本。

测试是否安装成功：在终端输入npm若显示npm相关命令则安装成功。

2、cnpm 的安装

npm包含开发过程中依赖的包部署在国外，下载起来比较慢，国内的淘宝对npm的镜像服务器cnpm是比较快的。我们通过npm下载cnpm，完成以后在下载需要以来的包是就可以使用cnpm命令下载。

cnpm下载命令：npm install -g cnpm --registry=https://registry.npm.taobao.org

3、vue-cli 的安装

vue-cli是vue官方提供的一个命令行工具，可用于快速搭建大型单页应用。该工具提供开箱即用的构建工具配置，带来现代化的前端开发流程。只需一分钟即可启动带热重载、保存时静态检查以及可用于生产环境的构建配置的项目。

Vue-cli安装命令：cnpm install -g vue-cli

测试是否安装成功：在终端输入vue若显示vue相关命令则安装成功。

二、创建一个vue项目

1、

初始化名为first_vue的项目

在命令行中运行命令 vue init webpack first_vue（如果不行，使用 vue-init webpack first_vue命令来安装）。解释一下这个命令，这个命令的意思是初始化一个项目，其中webpack是构建工具，也就是整个项目是基于webpack的。其中firstVue是整个项目文件夹的名称，这个文件夹会自动生成在你指定的目录中。

? Project description (A Vue.js project) vue-cli新建项目(项目描述)；

? Author (*******)；? Vue build 
❯ Runtime + Compiler: recommended for most users 
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere 
这里选择Runtime + Compiler: recommended for most users；

? Install vue-router? (Y/n) y 是否使用vue-router，这里根据需求选择；

? Use ESLint to lint your code? (Y/n)n 是否使用ESLint，这里根据需求选择；

? Pick an ESLint preset (Use arrow keys) 
❯ Standard (https://github.com/feross/standard) 
Airbnb (https://github.com/airbnb/javascript) none (configure it yourself) 这里选择Standard (https://github.com/feross/standard)

 ? Setup unit tests with Karma + Mocha? (Y/n) n 是否需要单元测试，这里根据需求选择；Setup e2e tests with Nightwatch? (Y/n) n是否需要单元测试，这里根据需求选择；

2、启动first_vue项目

根据提示：

cd first_vue

然后

npm run dev

启动项目。

根据提示我们的项目在本地的8080端口上运行。（若是你在本地想把项目启动在其他端口上，只需在：项目/config/index.js文件下dev配置下的port改为你需要的端口就行）。

 

三、项目如何运行

1、vue页面结构

vue页面中有三大模块<template></template>、<script></script>、<style></style>。

<template></template>中写我们的页面。template下必须只有一个根元素，可以使用一个容器元素包裹住，例如div。页面从index.html（首页入口文件）文件开始，继承src/App.vue（项目入口文件），然后再显示每个vue页面。

<script></script>中写我们的脚本。其中可以包含：

data：定义我们的数据类型。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。

created：在实例创建完成后被立即调用。

components：包含 Vue 实例可用组件的哈希表。将引入的组件放在这里。

methods：将定义的函数写到这里

<style></style>写页面样式。

2、路由如何跳转

浏览器中请求的路由会在router文件夹中进行映射。需要用到的vue在使用前import引入。