vue项目

本文介绍了Vue项目的创建过程,包括使用vue init webpack创建项目,安装和配置Sass,解决node-sass安装问题,处理浏览器默认样式,实现轮播图功能,页面滚动事件监听,路径别名设置,Sass学习,日期处理库moment.js的使用,全屏背景图效果,以及webpack打包时的常见问题和解决方案。同时提到了vue-area-linkage组件的使用,实现了省市区联动选择功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1. vue init webpack portfolio  安装模板


2.cd portfolio 进入项目


3.npm install  安装模块下代码的依赖


4.项目准备,新建resource文件夹,将图片放在其中


5.所有的代码文件都放在src文件夹中,src下一般有三个子目录,assets,components(在其中自建文件夹,存放组件,满足组件就近维护原则)和common(公共模块和资源,其中有3个子目录,js,scss,fonts)


6.为了使用sass,需要安装sass的依赖包  

npm install --save-dev sass-loader
//sass-loader依赖于node-sass
npm install --save-dev node-sass

打开webpack.base.config.js在loaders里面加上


module: {  //对模块的处理逻辑 对象
  rules: [
    ...(config.dev.useEslint ? [createLintingRule()] : []),
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: vueLoaderConfig
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
    },
    {
      test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('img/[name].[hash:7].[ext]')
      }
    },
    {
      test: /.scss$/,  //正则,匹配到的文件的后缀名
      loaders: ['style-loader', 'css-loader', 'sass-loader'],  //匹配处理到的文件
      exclude: "/node_modules/"   //排除的文件夹
    },
    {
      test: /\.(mp4|webm|ogg|mp3|wav|flac|aac)(\?.*)?$/,
      loader: 'url-loader',
      options: {
        limit: 10000,
        name: utils.assetsPath('media/[name].[hash:7].[ext]')
      }
    },
在用scss的地方写上

<style lang="scss" type="text/css">


7.如果在运行npm run dev的时候出现下面的错误



错误表示找不上node-sass模块,我是因为cnpm安装导致的,换成npm安装就好,或者cnpm install node-sass@latest


8.如果发现body具有margin:8px,这是浏览器默认的样式,可以考虑引入reset.css或者normalize.css去除这个样式

  在static文件夹新建一个css文件夹,里面包含reset.css或者normalize.css文件,在index.html文件中引入这个css文件



9.vue-awesome-swiper可以实现vue项目中的轮播图效果,是vueJS框架的插件


10.有经常用的变量而且不变的,要懂得封装成常量,不要很多地方都写同样的东西


11.在vue中,图片延迟加载可以使用vue-lazyload


12.实现监听页面的滚动事件 scroll事件  window.addEventListener('scroll',this.getTopBlock);


13.vue配置文件的梳理:https://segmentfault.com/a/1190000010659925


14.vue项目路径别名设置:http://www.cnblogs.com/xiaofenguo/p/7603086.html


15.sass的学习: http://sass-lang.com/guide


16.moment.js的学习,一款JavaScript日期处理类库:https://momentjs.com/

    安装方式:npm install moment --save

    使用:在main.js中添加这两行代码:

import moment from "moment";
Vue.prototype.$moment = moment;
一般我们只需要日期格式化即可: moment(要格式化的内容).format("YYYY-MM-DD HH:mm:ss")

17.div全屏背景图效果

div {
    background-image: url(bg03.jpg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center center;
    background-attachment: fixed;
    position:fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    text-align: center;
    color: #fff;
}

18.webpack打包时出现 Error: ENOENT: no such file or directory, scandir 

解决方案是:npm rebulid node-sass

19.vue-area-linkage省市区联动选择,基于 Element UI.

下载组件:

npm install --save vue-area-linkage

引入组件在 main.js:

import Vue from 'vue';
import VueAreaLinkage from 'vue-area-linkage';

Vue.use(VueAreaLinkage)

在组件中进行应用:

// basic
<area-select v-model="selected"></area-select>
<area-cascader v-model="selected2"></area-cascader>

//setting
<div class="areainp"><area-cascader type='text' :level='1' v-model="value1" placeholder="请选择地址"></area-cascader></div>

效果:



20.webpack 打包: https://segmentfault.com/a/1190000011275673

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值