项目初始化 | 青训营笔记

hunkydory
92 阅读2分钟

这是我参与「第四届青训营 」笔记创作活动的第8天

记录低代码项目中的问题或收获📖 本期讨论有关项目初始化

vue-cli脚手架初始化项目

通常使用node+webpack+淘宝镜像来初始化项目

在小黑窗中输入vue create <name> name为项目名


项目初始文件分析


node_modules：项目依赖文件夹

public文件夹： 放静态资源 webpack进行打包会原封不动打包到dist文件夹

src文件夹（源代码）：

-----assets： 多个组件共用的静态资源 ，在webpack打包的时候 会把静态资源当作模块打包到js文件里面

-----components文件夹：非路由组件（全局组件

-----App.vue唯一根组件

-----main.js

babel.config.js:配置文件 （babel)相关

package.json文件：项目名称、项目依赖、项目运行方式

package-lock.json：缓存性文件

README.md:说明性文件

其他配置

2.1 run后浏览器自动打开

package.json

"scripts": {
    "serve": "vue-cli-service serve --open",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },

2.2 eslint校验功能关闭

在vue.config.js 中 lintOnSave:false

2.3src文件夹简写方法，配置别名 @表示src文件夹

jsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "module": "esnext",
    "baseUrl": "./",
    "moduleResolution": "node",
    "paths": {
      "@/*": [
        "src/*"
      ]
    },
    "lib": [
      "esnext",
      "dom",
      "dom.iterable",
      "scripthost"
    ]
  }
}
​

前端路由分析

路由：kv键值对

key：URL

value：相应路由组件

本项目为上中下结构

路由组件：

Home首页路由组件

Search路由组件

login登录路由

register注册路由

非路由组件

header（首页 搜索页）、footer（在首页、搜索页有、 在登录页、注册页没有

1、书写静态页面

2、拆分组件

3、获取服务器的数据动态显示

4、完成相应的动态业务逻辑

注意1：创建组件的时候，组件的结构+组件的样式+图片资源

配置路由

放在router文件夹中放置js配置路由

1、引入vue

2、引入vuerouter

3、引入路由组件

4、配置路由 同时配置重定向（项目跑起来时访问/，自动跳转主页

index.js

import Vue from 'vue'
import VueRouter from 'vue-router';
Vue.use(VueRouter)
//引入路由组件
import Home from '@/pages/Home';
import Search from '@/pages/Search';
import Login from '@/pages/Login';
import Register from '@/pages/Register';
//配置路由
export default new VueRouter({
    //配置路由
    routes:[
        {
            path:'/home',
            component:Home
        },
        {
            path:'/search',
            component:Search
        },
        {
            path:'/login',
            component:Login
        },
        {
            path:'/register',
            component:Register
        }
    ]
})

5、在接口文件main.js中引入路由 并注册

import Vue from 'vue'
import App from './App.vue'
//引入路由
import router from '@/router'
Vue.config.productionTip = false
​
new Vue({
  render: h => h(App),
  router
}).$mount('#app')
​

注册完路由无论路由还是非路由组件都有routerouterouter属性

tips：路由组件用router-view 非路由组件用标签

💭💭💭

记录低代码项目中的问题📜
若本文对你有帮助 欢迎点赞收藏👍📑
若有纰漏，敬请包涵，评论区欢迎指正👂

avatar
文章
阅读
粉丝