vue + iview项目构建

ゞ浴缸里的玫瑰 2022-04-10 12:53 443阅读 0赞

最近在着手搭建自己的个人博客，确定技术栈为vue + node.js(express)+mysql，所以需要用vue写博客pc端以及后台管理系统页面，而UI组件则是用iview。把自己搭建项目的过程写出来，方便自己查阅，也供大家学习。

vue.js官网  
iview  
vue-cli  
PS：vue.js有著名的全家桶系列，包含了vue-router，vuex， vue-resource，再加上构建工具vue-cli，就是一个完整的vue项目的核心构成。

使用Vue-cli是快速构建VUE项目  
项目源码 好用请star 感激不尽  
vue-cli是官方推荐的构建工具，简化了我们使用webpack的难度，并且支持热更新，所以我们只需要关注开发，从而省去了繁琐的服务重启以及webpack配置打包过程。

此处是vue-cli构建过程，git构建过程在文章末

//安装前需要配置node及npm环境  
//全局安装 vue-cli 如果本机以前安装过  就无须执行避免重复安装   
$ npm install --global vue-cli  
//创建一个基于 webpack 的vue项目  
$ vue init webpack vue-iview-master // 后续按回车安装默认即可  
//进入到创建的vue项目  
$ cd vue-iview-master  
//安装依赖  
$ npm install  
//启动项目  
$ npm run dev //启动成功 http://localhost:8080 即可打开测试首页  
  
我的构建过程  
执行命令

$ vue init webpack vue-iview-master  
  
打印信息

? Target directory exists. Continue? Yes  
  A newer version of vue-cli is available.

latest:    2.9.6  
  installed: 2.9.3

'git' �����ڲ����ⲿ���Ҳ���ǿ����еĳ���  
���������ļ���  
? Project name vue-iview-master  
? Project description vue iview project  
? Author wq  
? Vue build standalone  
? Install vue-router? Yes  
? Use ESLint to lint your code? Yes  
? Pick an ESLint preset Standard  
? Set up unit tests Yes  
? Pick a test runner jest  
? Setup e2e tests with Nightwatch? Yes  
? Should we run \`npm install\` for you after the project has been created? (recommended) npm

vue-cli · Generated "vue-iview-master".  
  
执行命令

$ npm run dev  
  
打印信息

> vue-iview-master@1.0.0 dev G:\\Git\\public\\vue-iview-master  
> webpack-dev-server --inline --progress --config build/webpack.dev.conf.js

95% emitting

DONE  Compiled successfully in 4029ms                                                           12:36:44

I  Your application is running here: http://localhost:8080  
  
安装iview  
当前项目根目录执行命令

$ npm install --save iview  
  
引入iview  
src/main.js

// The Vue build version to load with the \`import\` command  
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.  
import Vue from 'vue'  
import App from './App'  
import router from './router'  
import iView from 'iview' // 引入iview依赖  
import 'iview/dist/styles/iview.css' // 引入iview css样式

Vue.config.productionTip = false  
Vue.use(iView) //使用iview组件

/\* eslint-disable no-new \*/  
new Vue(\{  
  el: '\#app',  
  router,  
  components: \{ App \},  
  template: '<App/>'  
\})  
  
新加入了三行代码

import iView from 'iview' // 引入iview依赖  
import 'iview/dist/styles/iview.css' // 引入iview css样式  
Vue.use(iView) //使用iview组件   
  
项目中使用iview组件  
做个简单的登录页面  
src/components 新建 login.vue文件

$ npm run dev  
1  
报错解决  
1 Unexpected tab character错误  
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character  
src\\components\\login.vue:3:2  
      width: 100%;  
       ^  
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character  
src\\components\\login.vue:4:2  
      height: 100%;  
       ^  
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character  
src\\components\\login.vue:5:2  
      background-color: \#1c2438;  
       ^  
✘  http://eslint.org/docs/rules/no-tabs                   Unexpected tab character  
src\\components\\login.vue:9:2  
      <div class="wrap login">                                                
       ^                                                                    ......  
  
解决  
.eslintrc.js 文件 rules下添加 ‘no-tabs’: ‘off’

rules: \{  
  // allow async-await  
  'generator-star-spacing': 'off',  
  // allow debugger during development  
  'no-debugger': process.env.NODE\_ENV === 'production' ? 'error' : 'off',  
  'no-tabs': 'off' // Unexpected tab character错误解决  
\}  
  
2 Mixed spaces and tabs错误  
原因是项目构建时设置eslint，主要是因为代码不规范报错。缩进不规范，分号不需要等原因   
最好是在项目构建时 Use ESLint to lint your code? (Y/n) 这一步选no

✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs  
src\\components\\login.vue:12:2  
                   <Input type="password" v-model="loginData.user" placeholder="请输入账号"></Input>  
        ^  
 ✘  https://google.com/\#q=vue%2Fno-parsing-error           Parsing error: x-invalid-end-tag  
 src\\components\\login.vue:12:82  
                   <Input type="password" v-model="loginData.user" placeholder="请输入账号"></Input>  
                                                                                 ^  
 ✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs  
 src\\components\\login.vue:13:2  
               </FormItem>  
        ^  
 ✘  http://eslint.org/docs/rules/no-mixed-spaces-and-tabs  Mixed spaces and tabs  
 src\\components\\login.vue:14:2  
               <FormItem label="Password" prop="passwd">  
  
解决  
在 config/index.js 里配置 useEslint: false

useEslint: false,  
1  
解决错误后启动项目  
npm run dev  
  
启动成功

DONE  Compiled successfully in 5198ms                                                  15:52:25

I  Your application is running here: http://localhost:8080  
  
login页面  
git项目源码构建过程  
项目源码  
//解压安装包到英文路径下  
//打开cmd窗口  
//cd到当前项目根目录 我的是 G:\\web\\git\\vue-iview-master>  
//安装前需要配置node及npm环境  
//初始化项目生成 Package.json等配置文件   
$ npm init -f  
//安装依赖  
$ npm install   
// 启动服务  
$ npm run dev //成功后 以下命令不需要执行  
\------------------------------------------  
//报错执行  
//初始化项目生成 Package.json等配置文件   
$ npm init -f  
//清除缓存  
$ npm cache clean --force  
//安装依赖  
$ npm install  
//启动服务  
$ npm run dev  
\---------------------