一、下载脚手架
npm install -g @vue/cli
检查是否安装正确
vue --version
二、创建项目
vue create project0
三、启动项目
$ cd project0
$ npm run serve四、安装 sass-loader
npm i sass-loader -D （-D是指是开发依赖，不会在生产包里） 五、安装 node-sass
npm i node-sass -D 六、改变项目结构
1、路径：project0\vue.config.js
module.exports = {
pages: {
index: {
entry: 'examples/main.js',
template: 'public/index.html',
filename: 'index.html'
}
},
}2、
七、封装
1、组件模板（路径：project0\components\lib\card\src\main.vue）
<template>
<div class="m-card" :style="width ? {width: width + 'px'} : {}">
<div class="m-card-img" :style="imgHeight ? {height: imgHeight + 'px'} : {}">
<img :src="imgSrc" alt="img" srcset="" />
</div>
<div v-if="summary" class="m-card-summary">
{{summary}}
</div>
<div v-else class="m-card-summary m-card-summary2">
<slot></slot>
</div>
<div class="footer">
<slot name="footer"></slot>
</div>
</div>
</template>
<script>
export default{
name: 'mCard',
props: {
width: { //卡片宽度
type: Number,
default: 0,
},
imgSrc: { //卡片图片资源地址
type: String,
default: '',
},
imgHeight: { //卡片图片的高度
type: Number,
default: 0
},
summary: { //卡片的概要
type: String,
default: ''
}
}
}
</script>2、导出组件（路径：project0\components\lib\card\index.js）
import mCard from './src/main.vue'
mCard.install = function(Vue){
Vue.component(mCard.name,mCard)
}
export default mCard3、注册组件（路径：project0\examples\main.js）
import '../components/css/demo.scss'
import mCard from '../components/lib/card/index'
Vue.use(mCard);4、引用组件（路径：project0\examples\App.vue）
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<demoVue></demoVue>
<mCard
width=200
imgSrc="1.png"
summary="剑指直通车"
>
</mCard>
<mCard
width=200
imgSrc="2.png"
summary="慕课网"
>
<template v-slot:footer>
<div>￥299</div>
</template>
</mCard>
<mCard
width=200
imgSrc="3.png"
>
本路线旨在帮助
<template v-slot:footer>
<div>￥399</div>
</template>
</mCard>
<!-- <m-card></m-card> -->
</div>
</template>5、结果：
八、webpack 打包js为umd模块
1、路径：webpack.component.js
const glob = require('glob');
const list = {};
async function makeList(dirPash,list){ //希望同步读取文件，所以用async
const files = glob.sync(`${dirPash}/**/index.js`);
console.log('files: ',files);
for(let file of files){
const component = file.split(/[/.]/)[2]
list[component] = `./${file}`
}
console.log('list ',list)
}
makeList('components/lib',list)
module.exports = {
entry: list,
output: {
filename: '[name].umd.js', //card.umd.js文件
path: 'dist',
library: 'mui',
libraryTarget: 'umd'
},
}2、安装vue-loader插件
npm i vue-loader -D3、路径：webpack.component.js
(1)引入vue-loader
const { VueLoaderPlugin } = require('vue-loader');(2)插件里配置VueLoaderPlugin
(3)module里的配置
4、路径：package.json文件
"build:js": "webpack --config ./webpack.component.js"
5、安装webpack-cli
npm install -D webpack-cli6、打包 npm run build.js
6.1
报错了：
解决：
npm add vue@next
npm add @vue/compiler-sfc -D
6.2打包 npm run build.js，报新的错：（输出路径的值不是绝对路径）
解决：
路径：webpack.component.js
引入path
const path = require('path'); //模块自带的
输出路径更改
path: path.resolve(__dirname,'dist'),
6.3打包 npm run build.js
成功
但是有一个warnning:(打包模式未设置，可选开发模式和生产模式。)
解决warnning：
->路径:webpack.component.js,设置打包模式（development/production）
6.4把多个模块打包在一个js文件中
lib 文件夹下加index.js文件
内容如下：
import demoVue from './demo';
import mCard from './card';
const fomponents = {
demoVue,
mCard
}
const install = function(Vue){
if(install.installed) return; //避免重复安装
Object.keys(components).forEach(key =>{
Vue.component(components[key].name,components[key]);
})
}
const API = {
install,
}
console.log(111);
export default API;执行 npm run build.js
结果如下：（dist文件夹下多了一个index.umd.js）
九、前端模块化
1.各个模块用函数封装
不同的功能封装成不同的全局函数
缺点：容易出现全局变量污染情况，模块成员之间看不出直接关系
2. 命名空间
优点：减少了全局变量，解决命名冲突
缺点：内部状态可以被外部改写
3. 匿名函数自调用
优点：数据私有，将接口通过必报暴露出来
缺点：模块之间有依赖关系时不好处理，闭包不是很好理解
4. 现代模块化规范
以文件为模块，有自己的作用域
在一个文件里定义的变量、函数、类都是私有的，其他文件不可见
三个代表性：
（1）CommonJs
文件作用域
缓存，
同步加载（会阻塞脚本的执行，不适用于浏览器）
（2） AMD
文件作用域
(异步加载，适用于浏览器端)
（3）UMD
十、gulp 打包css文件
1、新增gulp配置文件
路径：gulpfile.js
const gulp = require('gulp');
const sass = require('gulp-sass')(require('sass'));//将sass 文件转成css文件
const minifyCSS = require('gulp-minify-css');
gulp.task('sass',async function(){
return gulp.src('components/css/**/*.scss')
.pipe(sass()) //转成css文件
.pipe(minifyCSS()) //将css文件压缩
.pipe(gulp.dest('dist/css')) //文件输出路径
})
2、路径：package.json文件里设置
3、npm run build:css
4、npm install gulp sass gulp-sass gulp-minify-css -D
5、打包css，
npx gulp sass6、多个scss文件打包在一个css文件中
路径：components\css，新建index.scss文件
路径：package.json文件：
7、>路径：package.json文件中，在build中多个打包命令合并
十、发布到npm
1、>路径：package.json文件中的 “private: true”删掉
配置如下：
2、readme.md文件
3、发布（前提是已经注册了npm账号，npm官网：https://www.npmjs.com/）
终端-> npm login
终端-> npm publish
报错1：
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/project0 - You do not have permission to publish "project0". Are you logged in as the correct user?
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.翻译如下：
确认账号密码是正确的，但是还是报账号错误。
原因：
（1）账号密码错误
（2）未启动双因子验证
npm首页有提示：
我是按照提示，下载了Authenticator，然后有动态的一次性密码
之后npm login ,npm publish 需要输入的密码都是从“Authenticator” APP上获取。这一问题解决了。
报错2：
npm ERR! code E403
npm ERR! 403 403 Forbidden - PUT https://registry.npmjs.org/project0xxl20220519 - Package name triggered spam detection; if you believe this is in error, please contact support at https://npmjs.com/support
npm ERR! 403 In most cases, you or one of your dependencies are requesting
npm ERR! 403 a package version that is forbidden by your security policy, or
npm ERR! 403 on a server you do not have access to.翻译如下：
包名设置的有问题
备注：另外还有可能出现报名重复的情况，也会导致发包报错
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用。你还可以使用@来通知其他用户。