区块链技术博客
www.b2bchain.cn

项目初始化求职学习资料

D0b2wT.gif

本文介绍了项目初始化求职学习资料,有助于帮助完成毕业设计以及求职,是一篇很好的资料。

对技术面试,学习经验等有一些体会,在此分享。

前言

在平时的前端开发中,我们更多的是完成螺丝钉的角色,即在公司的前端框架下,实现各种业务逻辑,Vue技术栈并不是难点所在,难点往往在于从 0 到 1 搭建一个完整的实践项目,以及项目开发过程中对于很多技术细节的再学习和处理,帮助读者具备开发和统筹一个完整项目的能力是项目的目标,本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

技术栈

  • vue 2.6.11
  • vue-cli 4.0.5
  • vue-router
  • vuex
  • vant 2.10.2
  • 阿里图标字体
  • axios

基础环境搭建

vue-cli脚手架初始化

首先通过vue-cli这个脚手架工具生成项目的初始化结构。

vue create cou-yin

你会被提示选取一个preset,这个地方我们选择“手动选择特性”来选取需要的特性(这个地方会详细介绍)
项目初始化

  • Use history mode for router (这个地方我们选择history的路由方式,history 方式的路径后不会添加#)
  • Pick a CSS pre-processor (因为项目中Less编写样式 所以需要css 预处理)
  • Pick a linter/formatter config (项目中使用ESLint 代码风格检查,另外我们也希望可以通过额外的配置文件对 eslint做定制化配置 我们选择代码保存的时候做ESLint检查)
  • Save this as a preset for future projects (这个地方我们选择 n 我们不需要vue-cli保存我们预设文件)
    项目创建成功,根据提示:
cd dou-yin

启动项目

yarn serve

项目目录说明

|- assets                   // 资源文件夹       |--- fonts                   //  图标字体 阿里图标字体       |--- icons                   //  项目图标       |--- style                   //  封装的公共样式 一像素边框     |- componments              // 封装的组件文件夹 |- request                  //  axios 网络请求封装 |- router                   //  路由 |- store                    // vuex  |- styles                   // 公共样式文件夹 |- utils                    // 工具类 |- views                    // 视图页面   main.js                   //vue项目入口   App.vue                   //跟页面  .eslint.js                 // eslint配置文件   babel.config.js           // 解析babel的配置文件

`

引入第三方UI组件库

市面上有很多优秀的vue移动端组件库,cube-ui、vant 之类的,本人比较推荐vant(其实也没什么原因,就是用的比较顺手而已)

  • 在项目内 安装 vant
yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem yarn add postcss-px2rem -D
  • 采用按需引入的方式 配置组件的引入
    babel.config.js 修改成如下内容
module.exports = {   presets: [     '@vue/cli-plugin-babel/preset',   ],   "plugins": [     ["import", {       "libraryName": "vant",       "libraryDirectory": "es",       "style": true     }]   ] };

通过如上的配置,在组件内使用时,只需要引入组件就可以了,不需要再引入样式(这么做的目的是 可以减少打包后 bundle.js 体积)

  • 移动端适配
    移动端适配 我们借助 postcss-pxtorem 插件实现,用于将px转换成rem。
    再项目内安装安装插件
    lib-flexible用于设置rem基准值
    在项目中 新建postcss.config.js 内容如下:
module.exports = {     plugins: {       autoprefixer: {         browsers: [           'Android >= 4.0',           'iOS >= 8'         ]       },       'postcss-pxtorem': {         rootValue: 37.5,         propList: [           '*'         ]       },       'postcss-px2rem': {         remUnit: 37.5       }     }   }

修改main.js 文件 增加如下代码

import 'lib-flexible/flexible';   import 'normalize.css/normalize.css';  // 解决不同浏览器之间的差异

如上的配置,是按照UI设计搞750 * 1334配置的(如果是其他尺寸的设计搞,则改成 对应的即可)

配置Webpack

在项目中创建 vue.config.js,内容如下
“` javascript
console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;

前言

在平时的前端开发中,我们更多的是完成螺丝钉的角色,即在公司的前端框架下,实现各种业务逻辑,Vue技术栈并不是难点所在,难点往往在于从 0 到 1 搭建一个完整的实践项目,以及项目开发过程中对于很多技术细节的再学习和处理,帮助读者具备开发和统筹一个完整项目的能力是项目的目标,本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

技术栈

  • vue 2.6.11
  • vue-cli 4.0.5
  • vue-router
  • vuex
  • vant 2.10.2
  • 阿里图标字体
  • axios

基础环境搭建

vue-cli脚手架初始化

首先通过vue-cli这个脚手架工具生成项目的初始化结构。

vue create cou-yin

你会被提示选取一个preset,这个地方我们选择“手动选择特性”来选取需要的特性(这个地方会详细介绍)
项目初始化

  • Use history mode for router (这个地方我们选择history的路由方式,history 方式的路径后不会添加#)
  • Pick a CSS pre-processor (因为项目中Less编写样式 所以需要css 预处理)
  • Pick a linter/formatter config (项目中使用ESLint 代码风格检查,另外我们也希望可以通过额外的配置文件对 eslint做定制化配置 我们选择代码保存的时候做ESLint检查)
  • Save this as a preset for future projects (这个地方我们选择 n 我们不需要vue-cli保存我们预设文件)
    项目创建成功,根据提示:
cd dou-yin

启动项目

yarn serve

项目目录说明

|- assets                   // 资源文件夹       |--- fonts                   //  图标字体 阿里图标字体       |--- icons                   //  项目图标       |--- style                   //  封装的公共样式 一像素边框     |- componments              // 封装的组件文件夹 |- request                  //  axios 网络请求封装 |- router                   //  路由 |- store                    // vuex  |- styles                   // 公共样式文件夹 |- utils                    // 工具类 |- views                    // 视图页面   main.js                   //vue项目入口   App.vue                   //跟页面  .eslint.js                 // eslint配置文件   babel.config.js           // 解析babel的配置文件

`

引入第三方UI组件库

市面上有很多优秀的vue移动端组件库,cube-ui、vant 之类的,本人比较推荐vant(其实也没什么原因,就是用的比较顺手而已)

  • 在项目内 安装 vant
yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem yarn add postcss-px2rem -D
  • 采用按需引入的方式 配置组件的引入
    babel.config.js 修改成如下内容
module.exports = {   presets: [     '@vue/cli-plugin-babel/preset',   ],   "plugins": [     ["import", {       "libraryName": "vant",       "libraryDirectory": "es",       "style": true     }]   ] };

通过如上的配置,在组件内使用时,只需要引入组件就可以了,不需要再引入样式(这么做的目的是 可以减少打包后 bundle.js 体积)

  • 移动端适配
    移动端适配 我们借助 postcss-pxtorem 插件实现,用于将px转换成rem。
    再项目内安装安装插件
    lib-flexible用于设置rem基准值
    在项目中 新建postcss.config.js 内容如下:
module.exports = {     plugins: {       autoprefixer: {         browsers: [           'Android >= 4.0',           'iOS >= 8'         ]       },       'postcss-pxtorem': {         rootValue: 37.5,         propList: [           '*'         ]       },       'postcss-px2rem': {         remUnit: 37.5       }     }   }

修改main.js 文件 增加如下代码

import 'lib-flexible/flexible';   import 'normalize.css/normalize.css';  // 解决不同浏览器之间的差异

如上的配置,是按照UI设计搞750 * 1334配置的(如果是其他尺寸的设计搞,则改成 对应的即可)

配置Webpack

在项目中创建 vue.config.js,内容如下
“` javascript
console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;

前言

在平时的前端开发中,我们更多的是完成螺丝钉的角色,即在公司的前端框架下,实现各种业务逻辑,Vue技术栈并不是难点所在,难点往往在于从 0 到 1 搭建一个完整的实践项目,以及项目开发过程中对于很多技术细节的再学习和处理,帮助读者具备开发和统筹一个完整项目的能力是项目的目标,本项目将通过技术栈的详细讲解、多个功能模块的开发实践、并结合实际项目开发中的产品流程来完成这个任务。

技术栈

  • vue 2.6.11
  • vue-cli 4.0.5
  • vue-router
  • vuex
  • vant 2.10.2
  • 阿里图标字体
  • axios

基础环境搭建

vue-cli脚手架初始化

首先通过vue-cli这个脚手架工具生成项目的初始化结构。

vue create cou-yin

你会被提示选取一个preset,这个地方我们选择“手动选择特性”来选取需要的特性(这个地方会详细介绍)
项目初始化

  • Use history mode for router (这个地方我们选择history的路由方式,history 方式的路径后不会添加#)
  • Pick a CSS pre-processor (因为项目中Less编写样式 所以需要css 预处理)
  • Pick a linter/formatter config (项目中使用ESLint 代码风格检查,另外我们也希望可以通过额外的配置文件对 eslint做定制化配置 我们选择代码保存的时候做ESLint检查)
  • Save this as a preset for future projects (这个地方我们选择 n 我们不需要vue-cli保存我们预设文件)
    项目创建成功,根据提示:
cd dou-yin

启动项目

yarn serve

项目目录说明

|- assets                   // 资源文件夹       |--- fonts                   //  图标字体 阿里图标字体       |--- icons                   //  项目图标       |--- style                   //  封装的公共样式 一像素边框     |- componments              // 封装的组件文件夹 |- request                  //  axios 网络请求封装 |- router                   //  路由 |- store                    // vuex  |- styles                   // 公共样式文件夹 |- utils                    // 工具类 |- views                    // 视图页面   main.js                   //vue项目入口   App.vue                   //跟页面  .eslint.js                 // eslint配置文件   babel.config.js           // 解析babel的配置文件

`

引入第三方UI组件库

市面上有很多优秀的vue移动端组件库,cube-ui、vant 之类的,本人比较推荐vant(其实也没什么原因,就是用的比较顺手而已)

  • 在项目内 安装 vant
yarn add vant babel-plugin-import style-resources-loader postcss-pxtorem yarn add postcss-px2rem -D
  • 采用按需引入的方式 配置组件的引入
    babel.config.js 修改成如下内容
module.exports = {   presets: [     '@vue/cli-plugin-babel/preset',   ],   "plugins": [     ["import", {       "libraryName": "vant",       "libraryDirectory": "es",       "style": true     }]   ] };

通过如上的配置,在组件内使用时,只需要引入组件就可以了,不需要再引入样式(这么做的目的是 可以减少打包后 bundle.js 体积)

  • 移动端适配
    移动端适配 我们借助 postcss-pxtorem 插件实现,用于将px转换成rem。
    再项目内安装安装插件
    lib-flexible用于设置rem基准值
    在项目中 新建postcss.config.js 内容如下:
module.exports = {     plugins: {       autoprefixer: {         browsers: [           'Android >= 4.0',           'iOS >= 8'         ]       },       'postcss-pxtorem': {         rootValue: 37.5,         propList: [           '*'         ]       },       'postcss-px2rem': {         remUnit: 37.5       }     }   }

修改main.js 文件 增加如下代码

import 'lib-flexible/flexible';   import 'normalize.css/normalize.css';  // 解决不同浏览器之间的差异

如上的配置,是按照UI设计搞750 * 1334配置的(如果是其他尺寸的设计搞,则改成 对应的即可)

配置Webpack

在项目中创建 vue.config.js,内容如下
“` javascript
console.log(process.env.NODE_ENV)
const port = process.env.port || 10086;

部分转自互联网,侵权删除联系

赞(0) 打赏
部分文章转自网络,侵权联系删除b2bchain区块链学习技术社区 » 项目初始化求职学习资料
分享到: 更多 (0)
D0b2wT.gif

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

b2b链

联系我们联系我们