Fade away

Appearance

项目工程化 ​

1.安装脚手架 ​

工作中，开发Vue大概率是使用脚手架创建一个Vue项目，而不是单单写Html

Vue2的项目我们使用@vue/cli创建，@vue/cli是一个基于WebPack搭建的脚手架，只需几行指令，就可以创建一个项目

我们需要使用Vscode打开一个终端，或者使用相应的快捷键

image-20241018111716983

使用如下指令全局安装一个@vue/cli脚手架

bash
npm i @vue/cli@4 -g
  • npm：一个前端依赖包管理工具
  • i：install的缩写，意为下载
  • @vue/cli：需要下载的依赖包名称
  • @4：指定版本号
  • -g：代表全局下载，下载在电脑中，不单属于这个项目

注意

开发Vue2，需要下载4版本的@vue/cli@4

开发Vue3，需要下载5版本的@vue/cli@5

2.创建项目 ​

安装好脚手架之后我们可以使用vue create指令创建一个Vue2项目

bash
vue create myproject

回车之后会有如下选项，↑↓切换，回车确定

js
Vue CLI v5.0.8
? Please pick a preset: (Use arrow keys)
  Default ([Vue 3] babel, eslint)			// 最基础的Vue3框架
> Default ([Vue 2] babel, eslint)			// 最基础的Vue2框架
  Manually select features					// 自定义

省事可以选择Default ([Vue 2] babel, eslint)，但我们选择第三个，自定义

回车之后看到如下选项，↑↓切换，空格选择，回车确定，按照如下选择回车

js
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
 (*) Babel
 ( ) TypeScript
 (*) Progressive Web App (PWA) Support
 (*) Router
 (*) Vuex
>(*) CSS Pre-processors
 (*) Linter / Formatter
 ( ) Unit Testing
 ( ) E2E Testing

下一步选择2.x

js
Vue CLI v5.0.8
? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, PWA, Router, Vuex, CSS Pre-processors, Linter
? Choose a version of Vue.js that you want to start the project with 
  3.x
> 2.x

下一步选择history路由输入y确定

js
? Use history mode for router? (Requires proper server setup for index fallback in production) (Y/n) y

下一步选择Sass/SCSS (with dart-sass)

js
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): (Use arrow keys)
> Sass/SCSS (with dart-sass)
  Less
  Stylus

下一步选择最后一个，ESLint是语法校验工具，Prettier是自动格式化工具

js
? Pick a linter / formatter config: (Use arrow keys)
  ESLint with error prevention only
  ESLint + Airbnb config
  ESLint + Standard config
> ESLint + Prettier

下一步选择第一个，在保存时进行语法检验

js
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
>(*) Lint on save
 ( ) Lint and fix on commit

下一步选择第一个，配置文件单独存放

js
? Where do you prefer placing config for Babel, ESLint, etc.? (Use arrow keys)
> In dedicated config files
  In package.json

下一个是否保存此次配置，方便下次直接使用，看情况选择y或n

js
? Save this as a preset for future projects? (y/N) n

3.目录结构 ​

创建好项目后，会有如下一个文件目录，可能会有点差异

js
.文件目录
├── node_modules: 存放依赖包
├── public:存放静态资源
│   ├── favicon.ico: 页签图标
│   └── index.html: 主页面
├── src：项目主文件夹
│   ├── assets: 存放静态资源
│   │   └── logo.png
│   │── component: 存放公共组件
│   │   └── HelloWorld.vue
│   │── App.vue: 汇总所有组件
│   └── main.js: 入口文件
├── .gitignore: git版本管制忽略的配置
├── babel.config.js: babel的配置文件
├── package.json: 应用包配置文件 
├── README.md: 应用描述文件
└── package-lock.json: 包版本控制文件

3.1 删除node_modules ​

node_modules是个非常大的文件夹，删除会非常慢，可以使用rimraf这个工具

安装语法如下

js
npm install rimraf -g

删除语法如下

js
rimraf node_modules

4.单文件组件 ​

在工程项目中，都是组件化开发，vue的组件文件以.vue结尾

Vue2每一个文件的大致结构如下

vue
<template>
	<div>
        1
    </div>
</template>

<script>
export default {
    name:'ComponentName',
    data(){
		return{
            
        }
    },
    methods:{
        
    }
}
</script>

<style>

</style>

主要分为三个标签：

  • <template>：用来写html相关代码
  • <script>：用来写js相关代码，使用export default 导出一个对象，对象里写组件实例的配置项
  • <style>：用来写css样式，可以添加lang属性来指定css预处理器

5.项目配置文件 ​

Vue2是基于webpack脚手架搭建的项目，每个webpack项目下都应当有个webpack.config.js文件用来配置整个项目，但是Vue2的项目把他隐藏了，我们需要在项目根目录创建一个vue.config.js文件来写配置

vue.config.js用来配置跨域，配置项目插件等等

3.1 配置别名 ​

项目中导入一个东西需要写很长的路径，别名可以让导入更方便

js
const path = require('path');

module.exports = {
  configureWebpack: {
    resolve: {
      alias: {
        '@': path.resolve(__dirname, 'src'),
        '~': path.resolve(__dirname, 'src'),
        'style': path.resolve(__dirname, 'src/style')
      }
    }
  }
};

3.2 配置跨域 ​

js
module.exports = {
    devServer: {
        port: 60055,
        proxy: {
            '/api': {	
                target: '真实请求网址',
                changeOrigin: true, // 是否允许跨域
                secure: false,      // 关闭SSL证书验证https协议接口需要改成true
                pathRewrite: {     // 重写路径请求
                    '^/api': ''		//路径重写
                }
            },
            // ....
        }
    }
}

如上配置请求地址中的/api在请求时会被转化为target真实的路径

MIT Licensed

Copyright © 2024-present xarzhi