分类
vue

8、手动搭建vue项目

1.在终端使用npm init 初始化项目,一直按回车键,最后输入yes结束
2.安装项目需要的插件 npm i webpack vue vue-loader
3.根据终端提示需要安装vue-loader 相关依赖 css-loader 和vue-template-compiler
4.新建src文件夹,作为源码放置的目录
5.新建webpack配置文件,打包源码并输出文件,这样网页直接引用js文件即可显示
在配置文件时 会有几个版本兼容的bug
1、warn提示需要安装css-loader依赖
2、webpack4版本需要安装webpack-cli,根据提示安装就行
3、在webpack.config.js中配置开发模式 https://webpack.js.org/configuration/mode/=>mode: ‘development’
4、缺少VueloDelpLuin,在vue官网照着加上https://vue-loader.vuejs.org/zh/migrating.html
5、安装vue-template-compiler
6.安装stylus的loader,stylus-loader
7.安装webpack生产环境插件 webpack-dev-server
在package.json中写 “dev”: “webpack-dev-server –config webpack.config.js”
8.安装cross-env,来判断是在生产环境还是线上环境
9.安装html-webpack-plugin,把js编进html
项目开发
10.安装postcss-loader autoprefixer babel-loader babel-core
autoprefixer 优化编译后的css代码(比如自动加各种浏览器兼容的css代码)
11.安装babel-preset-env babel-plugin-transform-vue-jsx
babel-helper-vue-jsx-merge-props
(可能需要安装 babel-plugin-syntax-jsx)
12.安装css编译器 stylus
npm i stylus –save-dev
npm i stylus-loader –save-dev
13.在开发过程中,会遇到“Error: Cannot find module ‘@babel/core’”错误
是因为:官方默认babel-loader | babel 对应的版本需要一致: 即babel-loader需要搭配最新版本babel
https://www.npmjs.com/package/babel-loader
再执行以下两行命令
npm install -D babel-loader @babel/core @babel/preset-env webpack
npm i babel-plugin-syntax-jsx

14.webpack配置css单独分离打包
npm i extract-text-webpack-plugin@next –save-dev
在webpack.config.js import
const ExtractPlugin=reuqire(‘extract-text-webpack-plugin’)
else
// 正式环境
config.output.filename='[name].[chunkhash:8].js’
config.module.rules.push({
test:/.styl/,
use:ExtractPlugin.extract({
fallback:”style-loader”,
use:[
‘css-loader’ ,
{
loader:’postcss-loader’,
options:{
sourceMap:true,
}
},
‘stylus-loader’
]
})
})
// 因为webpack升级到4.3.包含contenthash关键字段,
// 所以在ExtractPlugin中不能使用contenthash
// 使用md5:contenthash:hex:8 替代 参数为静态文件名称
config.plugins.push(
new ExtractPlugin(‘styles.[md5:contenthash:hex:8].css’)
)
15.webpack区分打包类库代码及hash优化
config.entry={
app:path.join(__dirname,’src/index.js’),
vendor:[‘vue’]
}
new webpack.optimize.SplitChunksPlugin({
name:’vendor’
})
hash 文件后缀一样的都是一个hash码
chunkhash 所有文件的hash码都不一样

项目源码: https://gitee.com/bin012/vue-todolist

项目课程:https://www.imooc.com/learn/935

完善的项目源码:https://github.com/carrieguo/vue.js-todolist

webpack配置参考: https://vue-loader.vuejs.org/zh/guide/#vue-cli

发表评论

电子邮件地址不会被公开。 必填项已用*标注