vue-cli安装webpack项目及初始配置

Posted 2021-03-23 与f

 

这个下载包是自己基于 webpack 搞的，可以看看https://github.com/chichengyu/webpack

vue-cli安装

输入

npm install vue-cli -g 
# 如果速度慢，可以先安装 cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 然后再安装 vue-cli
cnpm install vue-cli -g
# 或者使用这节说到的 nrm 进行切换镜像源 https://www.jianshu.com/p/dbdc937997df 
# 卸载
npm uninstall vue-cli -g

vue-cli 安装好之后，然后初始化项目：

vue init webpack "项目名称"
# 当然我自己比较喜欢 webpack-simple 进行创建项目
vue init webpack-simple "项目名称"

注意：webpack 与 webpack-simple 区别：

本质上没有什么区别，webpack-simple除了没有eslint的代码风格检查器 和 单元测试，其他跟 webpack 一样，使用 webpack-simple初始化的项目比较简洁。
执行初始化创建项目命令后，此时会弹出命令 :

?Project name  （firstVue）  项目名称。
？Project description(A vue.js project)    (此处是添加项目描述)。
？Author (***)           (作者名称)。
？Use Eslint to lint your code (Y/N)     (是否使用eslint的代码风格检查器)。
？should we run "npm install" for you after the project has been created?   选择yes，use NPM

安装完成后，可以在 webpack.config.js 中配置路径别名：

resolve:{
   alias:{
       // 修改 vue 被导入时的路径    $ 表示以 vue 结尾
       "vue$":"vue/dist/vue.esm.js"
       // 给根目录下的 src 目录配置别名。方便引入文件
       // 注意：在模板组件中的 <style>引入样式 需要加 ~ 波浪线
       // 如：import ‘~@css/style.css‘
       "@": resolve("src")
   }
}

注意

1、在 vue-cli 脚手架中，当在 webpack.config.js 配置文件中 resolve 中设置了路径别名后，在模板组件中的 <style> 中引入样式 需要加 ~ 波浪线，如： import ‘~@css/style.css‘ 。
2、在 vue-cli 脚手架中，在模板组件中的 <style> 中的样式可以穿透子组件，不受 scoped 限制，如： .swiper >>> .swiper-action { color:red }，>>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式

<style>
    import ‘~@css/style.css‘  # 1
    # >>>表示样式穿透，表示 .swiper 里面所有子组件，出现 .swiper-action 的都应用这个样式
   .swiper >>> .swiper-action{
       color:red
   }
</style>

 

项目准备工作

1.index.html

在首页模板中的 meta 标签改为如下这样

<meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,er-scalable=no">

这样就防止了用户在设备上放大缩小。

2.引入 reset.css、border.css

下载地址：https://share.weiyun.com/5e9di8c
reset.css进行默认样式清除，border.css解决移动端边框 1像素的问题

3.解决移动端 click 事件300毫秒延迟

需要引入 fastclick 包，在项目根目录下，打开 命令窗口，输入：

npm install fastclick --save

安装完成之后，在入口文件 main.js 中输入：

import fastClick from ‘fastclick‘
fastClick.attach(document.body)

 

4.stylus

stylus 跟 less 、scss 很像，执行 如下进行安装

npm install stylus --save
npm install stylus-loader --save

文件后缀是 .styl

5.babel-polyfill

解决部分浏览器或手机不支持 Promise

npm install babel-polyfill --save

在入口文件 main.js 中引入

import ‘babel-polyfill‘; // 或者require(‘babel-polyfill‘);

 

 

 

转: https://www.jianshu.com/p/593746a6ee2d