记从0开始一个vue2移动端项目,创建及配置过程

yj_ovo_

已于 2022-08-15 12:16:22 修改

阅读量1.8k

点赞数 1

文章标签： vue.js 前端 javascript

于 2022-07-29 13:16:55 首次发布

本文链接：https://blog.csdn.net/qq_50797036/article/details/126051745

版权

注：使用eslint+vuex+vant组件库等，记录个人的项目配置过程

一、创建项目

1、当前目录下cmd打开终端

2、vue create todolist 创建一个名为todolist的vue项目

3、选择手动自己配置：Manually select features

上下键选择，回车确定

4、选择如下配置：空格选择，最后回车确定

5、选择vue2.x

6、选择no

7、选择less预处理

8、选择Eslint标准配置

9、选择在保存时检查

10、选择独立的配置文件，配置Eslint、Babel等

11、不保存配置，也可以选择保存配置

12、使用yarn包管理下载依赖包，npm下包有时候会有错误，可能是版本问题，使用yarn或cnpm进行下载

13、项目创建中

14、项目创建成功

15、vscode 打开项目：

16、项目启动：

17、项目效果

二、项目初始化改造

1、删除以下文件：

==>

2、改造App.vue页面

<template>
  <div id="app">Hello 这是项目App页面</div>
</template>

<script>
export default {}
</script>

<style lang="less">
</style>

3、改造src/router/index.js路由配置--初始化只留框

import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)

const routes = []

const router = new VueRouter({
  routes
})

export default router

4、添加文件夹：

/api/index.js ：存储请求函数模块

/styles ：样式文件模块

/utils ：工具函数模块

5、项目运行

三、遇到的问题，及一些配置

1、报错：space-before-function-paren

问题：保存后会自动格式化，函数后不带空格，而eslint要求函数后要带一个空格

解决方法：在.eslintrc.js文件中的rules中设置：

'space-before-function-paren': 0,

重启项目，成功运行

2、配置

2.1 .prettierrc.json 文件的配置

"singleQuote": true,格式化时用单引号，
"semi": false, 格式化时不要分号，
"trailingComma": "none" 格式化不要尾随逗号,

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

2.2 vant 组件库配置

1）下载vant组件库

yarn add vant

2）下载插件

yarn add babel-plugin-import -D

3）babel.config.js配置：

module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: [
    [
      'import',
      {
        libraryName: 'vant',
        libraryDirectory: 'es',
        style: true
      },
      'vant'
    ]
  ]
}

4）按需引入

2.3 移动端适配的配置

1）下载amfe-flexible

yarn add amfe-flexible

2）main.js引入

import 'amfe-flexible' // 引入flexible.js 设置根标签字体大小，做移动端的适配

3）下载postcss 和postcss-pxtorem@5.1.1

yarn add postcss postcss-pxtorem@5.1.1

4）根目录下创建postcss.config.js文件

module.exports = {
  plugins: {
    autoprefixer: {
      browsers: ['Android >= 4.0', 'iOS >= 8']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

四、Git的简单使用

创建的项目已经存在 /.git文件夹，若文件不存在需要输入：git init 对项目进行初始化

第一次：

1、git保存修改的文件

git status //查看文件状态
git add .  //暂存所有新增或修改后的文件

2、向仓库提交更新

git status
git commit -m '移动端项目:vuex-todolist初始化成功'

3、在GitHub上新建仓库

4、将本地仓库上传到GitHub

git remote add origin git@github.com:yaojun2001/vuex-todolist.git
git push -u origin master

5、GitHub仓库验证

6、后续使用git管理仓库一般只需要：

git status
git add .
git status
git commit -m '项目新建或修改的描述'
git push