新建vue2.0项目

最新推荐文章于 2024-08-10 20:37:11 发布

Xdoud住在翻斗花园

最新推荐文章于 2024-08-10 20:37:11 发布

阅读量1k

点赞数

文章标签： vue.js javascript typescript

本文链接：https://blog.csdn.net/weixin_44130964/article/details/122358453

版权

vue入门

下载安装node环境

安装网址：https://nodejs.org/en/
检查安装，输出版本号则安装成功

为了提高效率，可以使用淘宝镜像

npm install -g cnpm -registry=https://registry.npm.taobao.org,输入即可安装npm 镜像 ,以后用到npm的地方就可以用cnpm来代替，

搭建vue项目环境

全局安装vue-cli

npm install @vue/cli -g 使用vue -V查看版本

创建项目

Vue-cli创建项目有两种方式命令行方式界面化的方式

命令行方式

a....输入：vue create 项目名称，弹出

b....选择第三项手动配置（按<space>选择，<a>切换全部，<i>反转选择）

序号	选项	描述	选择
1	Choose Vue version	选择Vue版本	Y
2	Babel	vue项目中普遍使用es6语法，但有时我们的项目需要兼容低版本浏览器，这时就需要引入babel插件，将es6转成es5	Y
3	TypeScript	TypeScript通过添加类型来扩展JavaScript。通过了解JavaScript，TypeScript可以节省您捕获错误的时间并在运行代码之前提供修复。任何浏览器，任何操作系统，任何运行JavaScript的地方。完全开源
4	Progressive Web App (PWA) Support	渐进式Web应用程序（PWA）支持
5	Router	路由
6	Vuex	Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化
7	CSS Pre-processors	CSS预处理器，预处理器：比如要用sass或者cssNext就要按照人家规定的语法形式，就是用人家的语法去编写，然后人家把你编写的代码转成css。
8	Linter / Formatter	格式化程序	Y
9	Unit Testing	单元测试
10	E2E Testing	端到端（end-to-end）

c....选择vue版本2.x

d....选择路由模式（是否使用历史路由模式）

输入Y

e.....选择css预处理器，选择less

f.....格式化工具

Prettier 第三方的配置 Prettier 主要是做风格统一。代码格式化工具

g....选择其他lint功能，选择何时进行代码监测

Lint on save：在保存时进行检测

Lint and fix on commit：在fix和commit时进行检查

h.....您希望在哪里放置Babel，ESLint等的配置？

i......将此保存为预设以供将来的项目使用吗？（是/否）

输入N,回车后开始安装

j......安装完成后进入文件，启动项目

k......运行成功，访问项目

结构介绍

node_modules // 当前项目所有依赖，一般不可以移植给其他电脑环境
public

favicon.ico // 标签图标
index.html // 主页，打开网页后最先访问的页面

src
1. assets // 静态资源img、css
2. components //公共组件
3. views // 页面组件
4. App.vue // 根组件
5. main.js // 全局脚本文件（项目的入口）
6. router
  - index.js// 路由脚本文件（配置路由 url链接与页面组件的映射关系）
package.json//配置文件
package-lock.json //记录当前状态下实际安装的各个npm package的具体来源和版本号

文件介绍

Index.html ---主页，项目入口

index.html为项目访问的首站点，一般我们之定义一个空的根节点，在main.js里面定义的实例将挂载到根节点下，内容都通过vue组件来进行填充。

App.vue --- 根组件

Vue中要经常建立后缀名为.vue的文件，.vue的文件通常由三部分构成，分别用<template></template>，<script></script>与<style></style>标签包裹。

我们可以将上述三个部分理解为原来我们学习前端的html，javascript与css三个部分。

其中，<template></template>通常建立我们要用的网页界面，<script></script>通常与数据打交道，定义数据的首发方式等，面向逻辑，而<style></style>主要负责<template></template>标签中的样式。

【template】

其中模板只能包含一个父节点，也就是说顶层的div只能有一个（例如上图，父节点为#app的div，其没有兄弟节点）

<router-view></router-view>是子路由视图，后面的路由页面都显示在此处，打一个比喻吧，<router-view>类似于一个插槽，跳转某个路由时，该路由下的页面就插在这个插槽中渲染显示

【script】

vue通常用es6来写，用export default导出，其下面可以包含数据data，生命周期(mounted等)，方法(methods)等。

【style】

样式通过style标签<style></style>包裹，默认是影响全局的，如需定义作用域只在该组件下起作用，需在标签上加scoped，<style scoped></style>

Main.js --- 入口文件

main.js主要是引入vue框架，根组件及路由设置，并且定义vue实例

router.js --- 路由配置

ElementUi的使用

官方网址：https://element.eleme.cn/#/zh-CN/component/installation

下载安装

npm install element-ui -S

引入

在main.js中引入element：

import ElementUI from 'element-ui';

import 'element-ui/lib/theme-chalk/index.css';

Vue.use(ElementUI);

使用（查看官网案例）

发送请求

下载安装axios

npm install axios

引入（全局注册）

// 如果没有对请求做处理就引入原来的 import axios from './api/axios'

// 此处引入处理之后的

import axios from './api/axios'

Vue.prototype.$axios = axios

解决跨域问题

根目录下新建vue.config.js文件

module.exports = {

devServer: {

https: false, // 是否启用https

port: 8080, // 端口

proxy: { // 处理跨域，本地代理转发

'/server': {

target: 'http://192.168.0.110:8998', // 接口域名

changeOrigin: true, // 是否跨域

pathRewrite: {

'^/server': '' //这里理解成用‘/server’代替target里面的地址

}

新建axios.js文件(src/api/axios.js)用于处理关于请求的公共信息

//处理关于请求的公共信息

import axios from 'axios';

axios.defaults.baseURL = "/server" // server 根目录 vue.config.js 中配置的地址

axios.defaults.withCredentials = true // 跨域允许携带cookie

//请求拦截添加token

axios.interceptors.request.use(

config => {

config.headers.token = "eyJhbGciOiJIUzI1NiJ9.eyJMT0dJTl9VU0VSX0tFWSI6ImRlNGQ0ZWY0LTE1YjYtNGU0My1hOTc2LWU3MDkxZGM0NzI1ZCJ9.x1EzpeOM1qVi_f9YiUt6rh0QdHHhg5BXCp95gwme1EQ"

return config;

})

export default axios;