一创建vue项目

环境搭建

Node.js安装

①下载安装node.js（https://nodejs.org/en/download/current/）

②检查node.js是否安装和版本号：Windows+r打开cmd管理工具开始输入命令，

输入 node -v ，回车，查看node版本号，出现版本号则说明安装成功

示例如下：

检查npm是否安装: npm –v

注意：

node.js是自动包含npm的，什么是npm呢？

简单的说，就是节点包管

示例如下：

③安装完成后

通过 cnpm 来更加快速的安装 vue，因为 npm 是国外的，我们在国内访问会很慢，所以我们需要安装淘宝境像来提升我们的反应速度：

替换npm路径

npm config set registry https://registry.npm.taobao.org

淘宝镜像，这个装不装都可以，只要上面的npm换了就行，cnpm来代替npm

npm install -g cnpm --registry=https://registry.npm.taobao.org

检测安装是否成功，在命令行输入以下命令，即可看到对应的版本号：

npm -v

示例如下：

如果安装淘宝镜像，则需要输入： cnpm -v

vue-cli脚手架安装

执行命令行安装：window+r命令框里输入 npm i -g @vue/cli

验证安装是否成功：vue -V （注意：后面的V是大写）

有版本号则表示成功：

搭建项目

1 选择要创建项目的文件夹,在文件夹里的输入框输入cmd，这样可以方便自己在想要的位置进行创建项目。(还有一种方法是：window+r命令栏里输入cmd，在弹出的命令框里打CD，然后空格，输入要前往的目录，但这个方法对于不熟悉命令框操作的人来说容易出错。)

2 创建项目：vue create 项目名称（项目名称必须是英文开头，可以英文+数字）

3 选择Manually select features(自定义配置)

4 选择Router(后面要使用,也可以先不安装，后续安装)

5 选择3.x的版本

6 剩下的一直默认按回车,等待创建。

7 创建好之后打开制作项目的编程软件，在开始菜单栏里导入创建好的项目。

二开始项目制作

1 打开导入的项目

项目文件结构如下：

dist 生产环境打包目录 npm run buil

css文件是项目要用到的css文件,当你做webpack打包的时候，会把所有的css样式打包到这里

img打包的图片

js app.js放的是项目中各个页面的逻辑代码，将格式进行了压缩。

chunk-vendors.js:放的是通过import包导入的第三方依赖包。防止该文件体积过大，可以使用webpack 的externals配置。凡是声明在externals中的第三方依赖包，都不会被打包。同时需要在index.html 文件的头部，添加CDN资源引用。

其他.js文件是使用路由懒加载打包后的文件，按需导入路由，文件的名字是路由懒加载配置中的分组名称。

.js.map依然是一个Source map文件，Source map就是一个信息文件，里面储存着位置信息，转换后的代码的每一个位置，所对应的转换前的位置。项目打包后，代码都是经过压缩加密的，如果运行时报错，输出的错误信息无法准确得知是哪里的代码报错。有了map就可以像未加密的代码一样，准确的输出是哪一行哪一列有错，方便我们开发的时候做调试使用。

node_modules 项目的依赖库

Public 项目根目录 vuecli3构建基础模块--public

favicon.ico
index.html 入口页面

src项目源码目录 vuecli3构建基础模块--src

assets 项目公用资源目录（图片，ico）

components项目用到的组件

router 项目所有路由存放处

views 用于存放我们写好的各种页面

App.vue入口页面 js是一个可选的配置文件

math.js入口加载组件初始化等

.eslintrc.js eslint 配置项

.gitignore git 忽略项定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

babel.config.js js是一个可选的配置文件

jsconfig.json 主要用来配置一个默认根路径，以后可以通过该根路径快速访问到子路径以后 @ 就代表src根路径了

package.json 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

package-lock.json 简单理解就是锁定dependencies的版本号

README.md 项目说明文件

vue.config.js 是一个可选的配置文件

2 项目的编写

1 在src > view > HomeView.vue 里面写代码，这个页面是项目默认打开的主页面，

2 如果项目有多个页面，可以在src > view 右键新建vue文件（注意使用英文命名）

创建完成需要在src > router > index.js 文件里复制添加下面红框里的内容：

3 项目制作功能

项目的制作是通过多个不同的功能组合起来实现的，总体分为下面三类：

axios接口

Axios 是一个基于 promise 的网络请求库，可以用于浏览器和 node.js。Axios 使用简单,包尺寸小且提供了易于扩展的接口。

分为两种方式：

① Get请求

配置：

(1). 安装axios：npm install axios

(2). 引用axios：在需要使用的页面中引用

import axios from 'axios'

get请求使用params传参,本文只列举常用参数,

axios({

url: "", // url

params: {

// 参数

name: xxx,

age: xxx,

})

.then(function (res) {

console.log(res); // 成功回调

})

.catch(function (err) {

console.log(err); // 失败回调

});

当然，使用接口的同时，要在设置好的页面布局的指定位置使用v-for将从接口获得的数据循环出来到页面上。

(如果是单个商品则不需要v-for)

示例：

<template><!-- 商品 --><div class="shop"><div class="shop_single" v-for="item in list" :key="item.id" @click="func(item.id)"><img :src="item.photo_x"><div class=""><p class="shop_single_name">{{item.name}}</p><p class="shop_single_price"><span class="shop_single_price_span1">￥{{item.price}}</span><span class="shop_single_price_span2">￥{{item.price_yh}}</span></p><p class="shop_single_num"><span>新品推荐</span><span>销量：{{item.shiyong}}</span></p></div></div></div>
</template><script>//引入axios依赖import axios from 'axios'export default {data() {return {list: [], //因为商品是多个，所以需要创建空数组。}},created() {// 防止this乱指向let that = this;axios({url: "这里是你的后台数据接口", // urlparams: {},}).then(function(res) {console.log(res); // 成功回调that.list = res.data.prolist; //prolist是我的后台提供的商品console.log(res);}).catch(function(err) {console.log(err); // 失败回调});},methods: {}}
</script>

② Post请求

post请求使用data传参,需要使用qs处理参数

qs配置

1. 安装qs：npm install qs

2. 引用qs：在需要使用的页面中引用

import axios from 'axios'

import qs from 'qs'

方法 qs.parse()、qs.stringify()

qs.stringify()将对象序列化成URL的形式，以&进行拼接

qs.parse()将URL解析成对象的形式

写法

axios({

method: "post", //请求方式

url: "", //url

data: qs.stringify({

// 参数

}),

})

.then(function (res) {

console.log(res); //成功回调

})

.catch(function (err) {

console.log(err); //失败回调

});

示例：

<template><!-- 这里写html代码，搭建文档结构 --><div class="user_message"><div class="user_message_img"><img src="../assets/dizhi.png"></div><div class="user_message_content"><p><strong>{{name}}</strong></p><p>{{site}}</p></div></div>
</template><script>// 引入依赖import axios from 'axios'import qs from 'qs'export default {data() {return {name: '',site: ''}},created() {axios({method: "post", //请求方式url: "这里是你的后台数据接口", //urldata: qs.stringify({// 向后台发送清秀uid: '',addr_id: '',}),}).then(function(res) {console.log(res); //成功回调}).catch(function(err) {console.log(err); //失败回调});}}
</script>

插件的使用

使用vant插件（vant官网）

1轮播图

<template><!-- 轮播图 --><div class="banner"><!-- 插件 --><van-swipe class="my-swipe" :autoplay="3000"><van-swipe-item v-for="item in banner" :key="item.id"><img :src="item.photo"></van-swipe-item></van-swipe></div>
</template><script>// 引入axios依赖import axios from 'axios'export default {data() {return {banner: [],}},created() {// 防止this乱指向let that = this;axios({url: "https://exam.kuxia.top/index.php/Api/Index/index", // urlparams: {},}).then(function(res) {console.log(res); // 成功回调that.banner = res.data.ggtop;console.log(res);}).catch(function(err) {console.log(err); // 失败回调});},}
</script>

2选项卡

通过 v-model:active 绑定当前激活标签对应的索引值，默认情况下启用第一个标签。
<van-tabs v-model:active="active"><van-tab title="标签 1">内容 1</van-tab><van-tab title="标签 2">内容 2</van-tab><van-tab title="标签 3">内容 3</van-tab><van-tab title="标签 4">内容 4</van-tab>
</van-tabs><script>export default {setup() {const active = ref(0);return {active};},};
</script>

3弹窗

通过 v-model:show 控制弹出层是否展示。
<van-cell is-link @click="showPopup">展示弹出层</van-cell>
<van-popup v-model:show="show">内容</van-popup><script>export default {setup() {const show = ref(false);const showPopup = () => {show.value = true;};return {show,showPopup,};},};
</script>

弹出位置：

通过 position 属性设置弹出位置，默认居中弹出，可以设置为 top、bottom、left、right。

<van-popup v-model:show="show" position="top" :style="{ height: '30%' }" />

页面数据跳转传参

示例：点击跳转到商品详情

<!-- 商品 -->
<template><div class="shop"><div class="shop_single" v-for="item in list" :key="item.id" @click="func(item.id)"><img :src="item.photo_x"><div class=""><p class="shop_single_name">{{item.name}}</p><p class="shop_single_price"><span class="shop_single_price_span1">￥{{item.price}}</span><span class="shop_single_price_span2">￥{{item.price_yh}}</span></p><p class="shop_single_num"><span>新品推荐</span><span>销量：{{item.shiyong}}</span></p></div></div></div>
</template><script>// 引入axios依赖import axios from 'axios'export default {data() {return {list: [],}},created() {// 防止this乱指向let that = this;axios({url: "https://exam.kuxia.top/index.php/Api/Index/index", // urlparams: {},}).then(function(res) {console.log(res); // 成功回调that.list = res.data.prolist;console.log(res);}).catch(function(err) {console.log(err); // 失败回调});},methods: {// 跳转传承func(id) {// let that = this;console.log(1)this.$router.push({path: '/about',query: {id: id}})}}}
</script>

在接收数据页面使用：this.$route.query.id 来接收数据

页面跳转传参，有三种方法实现。

传参使用router,接收参数使用route,route包含路由信息

传参有两种方式,params和query,

query会将参数显示在地址栏

path跳转只能使用query传参,

name跳转都可以

(1) path跳,query传

在目标页面使用接收数据

（2）name跳,query传

在目标页面使用接收数据

（3）name跳,params传

在目标页面使用接收数据

VUE项目制作大致方法和流程相关推荐

win10快速运行vue项目跑起来 - 方法篇
如何让win10更快速跑vue项目运行起来? 不用再每次先cd到项目目录了, 直接进入根文件夹后,再打开Powershell窗口,可以省略一大堆操作 (详情如下简介) 快捷操作如下: 先打开,并进入 ...
Vue 项目打包部署实战完整流程总结!
使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了. Vue项目打包部署本身不复杂,不过一些前端同学可能 ...
vue项目nginx服务器部署详细流程....
vue项目nginx服务器部署 (1)前言将自己做的vue项目部署到服务器上,这里我采用的工具是Nginx,Nginx是一款轻量级的web服务器.反向代理服务器,由于它的内存占用小,启动快,高并发能 ...
IDEA打开vue项目，每次打开的都是上一次的vue项目，即同一个vue项目，解决方法
今天在打开其他vue项目的时候出现了一个大bug 前提:我用一个写好的vue项目vue_01复制之后重命名为vue_02,其实这里并包名没有修改成功,你还需要打开vue_02,右击项目Refactor ...
vue项目运行启动方法（从github上下载了一个前端项目进行运行）
1.从GitHub上下载完整的项目压缩包并解压到没有中文目录的路径下. 2.安装node: 官网地址 https://nodejs.org/en/ 按照 https://www.cnblogs.co ...
vue项目上传图片的方法
<template><div class="power"><ul class="clearfix"><li class ...
vue使用命令行构建完项目后_通过命令行创建vue项目的方法
通过命令行创建vue项目的方法最近想要学习vue,正好看到资料,如何通过命令创建vue项目的方法,就留个笔记环境要求: 安装有 Node.js. vue.vue-cli . 创建项目: vue i ...
vue项目搭配elementui需要下载的东西
前言: node.js: javascript运行时的环境,node.js之于js,等同于jvm至于Java的地位 npm(node package manager): node.js的包管理器,用于 ...
创建一个vue-cli项目到运行的完整流程
创建一个新的vue项目进行开发的完整流程安装vue 安装vue-cli 创建一个项目修改babel.config.js 预处理器安装 Sass 安装Less 安装stylus 在项目中.vue文 ...

VUE项目制作大致方法和流程

一创建vue项目

环境搭建

Node.js安装

vue-cli脚手架安装

搭建项目

二开始项目制作

1 打开导入的项目

dist 生产环境打包目录 npm run buil

node_modules 项目的依赖库

Public 项目根目录 vuecli3构建基础模块--public

src项目源码目录 vuecli3构建基础模块--src

.eslintrc.js eslint 配置项

.gitignore git 忽略项定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

babel.config.js js是一个可选的配置文件

jsconfig.json 主要用来配置一个默认根路径，以后可以通过该根路径快速访问到子路径以后 @ 就代表src根路径了

package.json 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

package-lock.json 简单理解就是锁定dependencies的版本号

vue.config.js 是一个可选的配置文件

2 项目的编写

3 项目制作功能

项目的制作是通过多个不同的功能组合起来实现的，总体分为下面三类：

axios接口

① Get请求

② Post请求

插件的使用

1轮播图

2选项卡

3弹窗

页面数据跳转传参

页面跳转传参，有三种方法实现。

(1) path跳,query传

（2）name跳,query传

（3）name跳,params传

VUE项目制作大致方法和流程相关推荐

最新文章

热门文章

VUE项目制作大致方法和流程

一 创建vue项目

环境搭建

Node.js安装

vue-cli脚手架安装

搭建项目

二 开始项目制作

1 打开导入的项目

dist 生产环境打包目录 npm run buil

node_modules 项目的依赖库

Public 项目根目录 vuecli3构建基础模块--public

src项目源码目录 vuecli3构建基础模块--src

.eslintrc.js eslint 配置项

.gitignore git 忽略项 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元 数据）。

babel.config.js js是一个可选的配置文件

jsconfig.json 主要用来配置一个默认根路径，以后可以通过该根路径快速访问到子路径以后 @ 就代表src根路径了

package.json 定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。

package-lock.json 简单理解就是锁定dependencies的版本号

vue.config.js 是一个可选的配置文件

2 项目的编写

3 项目制作功能

项目的制作是通过多个不同的功能组合起来实现的，总体分为下面三类：

axios接口

① Get请求

② Post请求

插件的使用

1轮播图

2选项卡

3弹窗

页面数据跳转传参

页面跳转传参，有三种方法实现。

(1) path跳,query传

（2）name跳,query传

（3）name跳,params传

VUE项目制作大致方法和流程相关推荐

最新文章

热门文章

一创建vue项目

二开始项目制作

.gitignore git 忽略项定义了这个项目所需要的各种模块，以及项目的配置信息（比如名称、版本、许可证等元数据）。