农村信息综合展示平台(微信网页)项目开发笔记一——项目创建

最新推荐文章于 2022-05-13 10:22:17 发布

猪小屁来啦

最新推荐文章于 2022-05-13 10:22:17 发布

阅读量399

点赞数 1

文章标签： vue

本文链接：https://blog.csdn.net/sjszscx/article/details/98481258

版权

本系统是基于vue.js框架搭建的农村信息综合展示平台。该系统注重于服务村民，为村民及时提供村里的重大信息，并提供村民交流的平台。

本系统使用vue-cli 3.xjiao脚手架进行搭建，步骤如下

一、安装Vue-cli 3.x

1. 由于之前使用vue-cli 2.x脚手架搭建的框架，这次选用新的3.x，因此我们要卸载旧版，再安装新版

npm uninstall vue-cli -g

npm install -g @vue/cli

2.安装完后使用这个命令进行检查其版本是否正确

 vue --version

二、创建项目

1.运行以下命令来创建一个新项目：

vue create wechatWeb

2.我们选择Manually select features 进行自定义配置（按上下键选择哪一个，按空格键确定，所有的都选择好后，按enter键进行下一步）

Vue CLI v3.10.0
? Please pick a preset:
  default (babel, eslint)
> Manually select features

3.此处选择项目需要的一些特性（此处我们选择需要Babel编译、Vue路由、Vue状态管理器、CSS预处理器、代码检测和格式化、以及单元测试，暂时不考虑端到端测试(E2E Testing)）

? Please pick a preset: Manually select features
? Check the features needed for your project:
 (*) Babel
 ( ) TypeScript
 ( ) Progressive Web App (PWA) Support
 (*) Router #vue路由
 (*) Vuex  #Vue状态管理器
 (*) CSS Pre-processors #CSS预处理器
 (*) Linter / Formatter #代码风格检查器
>(*) Unit Testing #单元测试
 ( ) E2E Testing

4.我们依次选择想要的（CSS预处理器语言：选择Less；ESLint的代码规范：Standard代码规范；选择何时进行代码检测：在保存时进行检测；单元测试解决方案：mocha+chai；选择 Babel、PostCSS、ESLint等配置文件存放位置：保存在各自的配置文件中）

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, Router, Vuex, CSS Pre-processors, Linter, Unit
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Less
? Pick a linter / formatter config: Standard
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Pick a unit testing solution: Mocha
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects:No

5.配置完成后等待Vue-cli完成初始化

三、连接github远程仓库

项目创建成功后，我们将项目上传到github

1.访问github官网，登录完成之后，头像的地方加号可以创建新的仓库

2.设置一个仓库名称，添加一个描述信息，选择公开，最下面是开源协议，可以根据自己需要选择

3.创建成功后，打开命令行程序，进入项目存放路径，添加远程库，输入这个指令

git remote add origin git@github.com:******/wechatWeb.git

4.把本地内容推送到github仓库

git push -u origin master

四、配置vux

本项目是应用于微信公众号网页，因此选择远程移动端ui库：vux

1.安装vux

npm install vux --save

2.安装插件

安装vux-loader(必须安装)

npm install vux-loader --save-dev

安装yaml-loader (以正确进行语言文件读取)

npm install yaml-loader --save-dev

3.配置vux环境（若不配置可能出现vue $t is not a function这个错误）

根据查阅资料显示：由于vue-cli3使用的是webpack4而且更新过vue-loader，所以vux使用起来会存在一些兼容的问题，这里需要额外配置一下。官方更新过vue/cli3.x 的vue-loader，正常配置会导致加载错误。所以需要手动指定vue-loader的版本来解决加载问题。

npm install vue-loader@14.2.2 -D

在packageage同级目录下新建一个文件vue.config.js，进行配置vux-loader，用于正确对于组件的load

在文件里加入以下内容

module.exports = {
    configureWebpack: config => {
        require('vux-loader').merge(config, {
            options: {},
            plugins: ['vux-ui']
        })
    }
}

这样，配置就完成了。