VUE项目搭建与开发

电玩女神 2022-05-14 05:07 156阅读 0赞

## 一、 VUE简介 ##

Vue.js 是一个JavaScriptMVVM库，是一套构建用户界面的渐进式框架。它是以数据驱动和组件化的思想构建的，采用自底向上增量开发的设计。相比于Angular.js，Vue.js提供了更加简洁、更易于理解的API，使得我们能够快速地上手并使用Vue.js；同时比起 React + Redux 相对复杂的架构，Vue.js 更加轻量级也更加容易上手，是初创项目的首选前端框架。Vue 的核心库只关注视图层，它不仅易于上手，还便于与第三方库或既有项目整合。并且作者是华人的关系，Vue拥有着对华人开发者最友好的api文档和官方教程。

## 二、 技术选型 ##

Element-ui：使用UI框架中部分UI组件进行快速开发  
Sass：编写CSS语句  
ES6：编写JS语句  
Vue：进行数据绑定以及开发组件  
Vue-router:处理页面路由  
Vuex：处理各组件间的通讯  
Vue-resource：处理HTTP请求  
Webpack：项目管理及打包上传

## 三、 项目创建 ##

1.电脑下载安装node， 检测node版本，需要在V4以上($node-v)；//(npm install -g cnpm –registry=[https://registry.npm.taobao.org][https_registry.npm.taobao.org]安装淘宝镜像)；  
2.全局安装vue (*n**p**m**i**n**s**t**a**l**l*–*g**v**u**e*)；3.安装脚手架(  n p m i n s t a l l – g v u e ) ； 3. 安 装 脚 手 架 ( npm install –g vue-cli)；  
4.运行vue命令，看是否已经安装完毕(*v**u**e*/  v u e / vue list查看可安装的魔板)；  
5.初始化项目(*v**u**e**i**n**i**t**w**e**b**p**a**c**k*(模板)*c**i**c**A**p**p*(项目名称))；6、进入目录，安装模块下代码的依赖(  v u e i n i t w e b p a c k ( 模 板 ) c i c A p p ( 项 目 名 称 ) ) ； 6 、 进 入 目 录 ， 安 装 模 块 下 代 码 的 依 赖 ( npm install)；  
7、启动项目(*n**p**m**r**u**n**d**e**v*)；8、打包项目(  n p m r u n d e v ) ； 8 、 打 包 项 目 ( npm run build)；  
四、 目录结构

## 五、 安装项目需要的依赖 ##

1、安装vue-router路由  
$npm install vue-router –D  
2、安装sass-loader以及node-sass插件  
npm install sass-loader –D  
npm install node-sass -D  
3.安装轮播插件  
npm install -S vue-carousel  
4.引入vuex用于存储状态  
npm install vuex –save-dev  
5.安装Echarts图表  
npm install echarts -S

## 六、其他注意事项 ##

**1.vue项目关闭eslint校验**  
两种解决方法  
（1）在创建一个vue项目的时候，会有一个选择：Use ESLint to lint your code? (Y/n)，在这一步，选择no就好了；  
（2）修改build\\webpack.base.conf.js  
![这里写图片描述][70]  
将标红这一块的格式校验内容去掉就好了。  
**2.sass语法不使用大括号和分号,否则会报CSS无效的错误**  
如果你喜欢使用不带大括号的语法，只要去掉css代码的大括号和分号，即使用缩进语法。  
如果你希望使用带大括号的语法，即SCSS  
那么，你只要把lang=”sass”改成lang=”scss”就行了。  
**3.注册组件，自定义标签名需要全部小写，否则会报下面的错误**  
![这里写图片描述][70 1]  
**4.控制v-for循环次数的方法**  
两种方法  
（1）截取循环的数据  
v-for=”(item,index) in domainList.slice(0, 2)”  
（2）通过v-if来控制  
v-for=”(item,index) in domainList” v-if=”index<3”  
**5.v-for中出现key值警告，添加:key=”index”**  
![这里写图片描述][70 2]  
**6.组件内引入外部css**

@import "../assets/css/style.scss";

**7.css只用于本组件内部**

**8.vue :src 文件路径错误**  
根据webpack的特性，总的来说就是static放不会变动的，第三档的文件，asserts放可能会变动的文件;  
如果图片放在asserts目录下，需要将图片作为模块加载进去，比如images:\[\{src:require(‘./1.png’)\},\{src:require(‘./2.png’)\}\]  
如果图片放在static目录下，必须写成绝对路径如images:\[\{src:”/static/1.png”\},\{src:”/static/2.png”\}\]  
**9.函数中触发路由跳转**

this.$router.push(/path);

**10.vue2.0中不再有自带的过滤器，需要自己定义过滤器**  
**11.methods中的一个方法调用methods中的另外一个方法，使用**

this.$options.methods.test2();

**12.父组件调用子组件的方法ref**

<template>
        <div>
            <header>{
       {msg}}</header>
            <select v-model="selected" @change="sieve(selected)">
                <option v-for="item in condition" v-bind:value="item.name">{
       {item.name}}</option>
            </select>
            <sellerlist ref="abc"></sellerlist>//子组件中声名ref
        </div>
    </template>
    <script> import sellerlist from '../components/sellerlist.vue' export default{ data(){ return { msg:'', condition:[ {name:'距离最近'},{name:'起送价最低'} ], selected:'' } }, components:{ sellerlist }, methods:{ getParams(){ console.log(this.$router) this.msg = this.$router.history.current.query.name; }, sieve(selected){ console.log(selected) if(selected == '距离最近'){ this.$refs.abc.isAsc('distance',true)//父组件中调用 } if(selected == '起送价最低'){ this.$refs.abc.isAsc('fee',true) } } }, created() { //在模板编译进路由前调用created方法，触发接收函数 var self = this; self.getParams(); } } </script>
    <style lang="scss" scoped> select{ padding-top:2em; background:red; } </style>

**13.require和import都可以引入依赖，不同的是require可以直接直接从 node\_modules 中查找，而import必须把路径写全**

[https_registry.npm.taobao.org]: https://registry.npm.taobao.org
[70]: /images/20220514/27be489e6d1246c8b67eaa54c29ea601.png
[70 1]: /images/20220514/8baaac7c2b1d4e8584a3287ac6fd21e9.png
[70 2]: /images/20220514/c61a91b2bf6c40bc9867e4fffece2041.png