创建vue项目的基本流程

疯子啊
176 阅读3分钟

1.0 使用vue-router

1.1 基本使用

​ 先引入vue，再引入vue-router

<div>
  <!-- 创建router-link 属性to代表路由路径  -->
  <router-link to="/path"></router-link>
  
  <!-- 这是用来显示组件的占位符 -->
  <router-view></router-view>
</div>

​ 创建路由实例和规则

import Path from '../components/Path.vue'

let router = new VueRouter({
  routes: [
    { path: '/', redirect: '/path' },
    { path: '/path', component: Path }
  ]
})

​ 把当前的实例对象挂载到vue实例中

1.2 嵌套和编程式导航

// 嵌套路由
let router = new VueRouter({
  routes: [
    { path: '/path', component: Path, children: [
      { path: '/son', component: son }
    ] }
  ]
})

// 使用 this.$router 调用方法
this.$router.push('/login')
this.$route.go(-1) // 回退一步

1.3 动态路由传参

​ 首先在router-link中需要传入指定的参数格式

<div>
  <router-link to="/path/5"></router-link>
</div>

​ 在路由规则中接收对应匹配的参数格式

// 如何使用 num 的值
// 1.0 在组件标签中直接使用 $route.params.num
// 2.0 在路由规则中添加 props 为 true，然后再组件中通过 props 数组接收 num，再去组件标签中使用 num
// 3.0 在路由规则中可以传入静态的对象，但是用不了num
// 如果需要动态和静态的参数，就需要给props传入一个函数，形参为 route，动态参数通过route.params 获取

let router = new VueRouter({
  routes: [
    { path: '/path/:num', component: Path }
  ]
})

2.0 webpack的使用

​ 在当前项目中通过 npm 下载 webpack webpack-cli

2.1 ES6 模块化规范

​ AMD CMD CommonJS

export default {
  
}

import XXX from XXX
import "..."

2.2 webpack 基本使用

​ 创建 src 文件夹

​ 创建main.js index.html

​ 在 package.json 的 script 节点中，加入一个 dev 属性，值是 webpack

​ // 完成项目基本功能后

​ 在控制台中，输入

​ npm run dev

​ 在根目录中，产生一个 dist 目录，里面含有编译好的 main.js

2.3 根据文档进行配置

​ 创建 webpack.config.js

// 书写的规范是 Node的 CommonJS 模块化规范 

module.exports = {
  mode: 'development',
  entry: 要编译的文件绝对路径,
  output: {
    path: 指定编译的文件夹绝对路径,
    filename: 指定生成的文件名称
  }
}

2.4 使用插件

>#### webpack-dev-server

​ 自动打包，在磁盘的根目录中创建了 bundle.js 文件，创建虚拟服务器运行文件

​ 在 package.json 中可以配置参数， 自动打开文件，自定义运行端口，指定打开的浏览器

"dev": "webpack-dev-server --open 'google chorme' --hot --port 8888"

html-webpack-plugin

​ 会创建一个index.html 在磁盘中，自动引入上一步打包好的 bundle.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlWebpackPlugin({
  template: './src/index.html',
  filename: 'index.html'
})


// 在导出的模块中配置插件
module.exports = {
  plugins: [ htmlPlugin ]
}

2.5 配置其他文件的 loader

>#### style-loader   css-loader

{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader'] }

less-loader less

{ test: /\.less$/, use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader'] }

post-css autoprefixer

​ 新建配置文件

const autoprefixer = require('autoprefixer')

module.exports = {
    plugins: [autoprefixer]
}

url-loader file-loader

{
                test: /\'jpg|jpeg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
                loader: 'url-loader',
                options: {
                    // 一般图片指定大小100kb所有  所以  10240
                    // 小于 100kb 的图片就转换成内联的 base64 格式的图片，方便快速加载
                    limit: 102400,
                    name: 'images/[name]-[hash:8].[ext]'
                }
}

​ 创建babel的配置文件 .babel.config.js

​ npm install babel-loader @babel/core @babel/runtime -D

​ npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D

module.exports = {
        presets:["@babel/preset-env"],
        plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
    }

babel-loader

//exclude为排除项，意思是不要处理node_modules中的js文件
{ test: /\.js$/, use: "babel-loader", exclude: /node_modules/ }

vue-loader vue-template-compiler

// 导入匹配vue文件的插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')

plugins: [new VueLoaderPlugin()],

{ test: /\.vue$/, use: 'vue-loader' }

2.6 vue的单文件组件

​ 后缀名 为 .vue 的文件

<tempale>
	<div>
    
  </div>
</tempale>

<script>
	export default {
    
  }
</script>

<style lang="less" scoped>

</style>

3.0 脚手架的使用

3.1 基本使用

​ npm i @vue/cli -g

3.2 两种创建文件的方式

​ vue create 项目名称

​ vue ui

> #### 选择当前安装预设包的方式

​ 第一安装选择手动的方式 Manually的方式

​ 如果有自己喜好的方式，可以在创建项目之后直接选中

选择需要安装的依赖包

​ Babel 、Router 、Linter

​ 如果手动配置，要选择的话用空格表示选中，回车下一步

是否使用历史模式

​ 不是，如果需要使用，一定配合后端的设置

选择代码风格检查的eslint方式

​ ESlint + Standard config

选择执行代码检查的时机

​ Lint on save 代码在保存的时候

选择配置文件生成的方式

​ In dedicated config files 使用单独的配置文件

是否将当前选择的项作为模板

​ 自己去体会

在windows中，自定义创建了项目，会在控制面板中显示项目的路径

在ui创建的项目中，可以在创建时，选择指定的项目存储目录

3.3 代码检查取消错误处理

创建 .prettierrc 文件

{
  "semi": false,
   "singleQuote": true
}

修改 .eslintrc.js

rules: {
    'space-before-function-paren': 0
}

如果不需要通过ui启动项目，可以单独声明配置文件

vue.config.js

moudule.export = {
  devServer: {
    open: true,
    port: 8080,
    hot: ture // 在ui面板中启动的项目保存就可以更新，但是这种方式需要加上这个属性
  }
}

4.0 项目思路

​ 删除了 views 文件夹

​ 删除了 components 内部的所有组件

​ 清空了App.vue 组件内部的引入内容

​ 把路由的 index.js 中引入的组件和规则全部删除

在使用脚手架配置的项目中，下载了插件 element-ui， 下载了本地依赖 less-loader less

4.1 完成登录

​ 注册了码云，绑定了邮箱，创建了仓库，创建了公钥，上传绑定了公钥

​ 配置了个人信息，定义了默认上传的路径，上传项目

4.1.1 创建组件

​ 在 components 组件中，创建了 Login.vue

​ 完成了页面的布局，使用了 element-ui , 完成了按需导入

import { Button } from 'element-ui'
Vue.use(Button)

​ 完成了盒子水平垂直居中，设置了头像和输入框，加入了双向数据绑定的功能

​ 在表单中，重置的方法resetFields()和预校验validate()的方法，但是需要通过给form设置 ref属性

this.$refs.validate(valid => {
 // valid 就是预校验的内容
})

// 校验规则的方式
// 给form表单加上 :rules 属性
// 在data数据中，声明规则
rules: {
  username: [
    { required: true, message: '提示信息', trigger: 'blur' },
    { min: 3, max: 10, message: '提示信息', trigger: 'blur' }
  ]
}

在main.js 中引入axios，并全局配置

import axios from 'axios'
axios.defaults.baseURL = '接口基本地址'
// 这句话是通用的，目的就是把当前各个组件需要使用的对象挂载到 vue 实例的原型上
Vue.prototype.$http = axios

相同的原理，在使用 Message 组件的时候也用到了

import { Message } from 'element-ui'
Vue.prototype.$message = Message

发请求的基本格式

login() {
  this.$refs.validate(async valid => {
   const { data: res} = await this.$http.post('/login', this.loginForm)
   
   // 在这里就可以使用提示面板和编程式导航
   if(res.meta.status !== 200) return this.$message.error('登录失败')
   
   window.sessionStorage.setItem('token', res.data.token)
   this.$router.push('/home')
  })
}

4.2 配置后端的过程

​ 安装 phpStudy ， 安装它的目的是为了安装 MySQL，因为这种方式安装最简单

​ 导入sql数据库文件，如果导入不了，需要设置上传文件的最大值

​ 打开 php_ini 的文件 搜索 post_max 和 upload_max 的配置

​ 使用mysql的图形软件手动配置数据库文件

​ 启动phpStudy, 打开服务端文件，

​ npm i 下载所有的依赖包, 使用 node ./app.js 运行服务器

​ （如果配置过服务器，数据库有密码，要去config文件夹修改密码）

avatar
文章
阅读
粉丝