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

时间:2024-03-26 08:19:44

VueWindows系统下本地项目的安装与部署

一、项目的前期准备

1、node.js 的安装

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

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

2cnpm 的安装

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

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

3vue-cli 的安装

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

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

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

二、创建一个vue项目

1、

初始化名为first_vue的项目

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

在命令行中运行命令 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改为你需要的端口就行)。

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

三、项目如何运行

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引入。