一、准备
准备(不多说):
1. 全局安装 vue vue-cli
2. 全局安装 webpack webpack-cli
3. 全局安装 node
二、起步
(1)创建项目文件夹,进入项目文件夹并打开命令行,输入:
npm init
然后一路回车
此时在根目录下会生成: package.json 文件
(2)创建index.html文件,并在项目下安装 vue、webpack
创建index.html在根目录,然后在命令行内输入:
npm i --save-dev webpack webpack-cli webpack-dev-server // 安装webpack webpack-cli 以及devServer
npm i --save vue // 安装vue
说明: 为什么要加 --save-dev 命令?
答: 在 package.json 中,有2个属性,分别是 “dependencies” 和 “devDependencies”,两者的不同之处在于:
devDependencies : 该模块中所列举的插件属于开发环境的依赖,
dependencies: 该模块中所列举的插件属于生产环境的依赖
当加上 --save-dev的时候,代表着该插件只应用于 本地开发环境,而只有--save则代表着不仅应用于开发,还应用于生成环境。
全部完成后,在文件目录下会出现4个文件,分别是 node_modules、index.html、package.json 和 package-lock.json,package-lock.json的意义在于锁住依赖库的版本,确保项目中使用的各依赖库版本不会被更新。
(3)创建 main.js文件,创建webpack.config.js 文件,创建src目录,并在src目录下创建App.vue文件
完成以上后,进入main.js文件,输入以下代码:
import Vue from 'vue'
import App from './src/App.vue'
new Vue({
render: h => h(App),
}).$mount('#app')
我们已经创建了.vue文件,注意,这种文件浏览器是不认识的,webpack也不认识这种文件,如果想让webpack打包的时候能够解析这种文件,我们需要安装 vue-loader 和 vue-template-compiler,帮助webpack去解析.vue文件。
注意: webpack本身并不支持对很多种文件的解析,比如css文件,vue单文件,图片文件等等,如果想要让webpack支持这种文件的解析,那么必须安装相应的 loader 或者 plugin
在终端输入:
npm i --save-dev vue-loader vue-template-compiler
安装完成不代表我们就能立刻使用它,我们要在webpack上配置下才能使用!
下一章:不使用 vue-cli 去搭建一个 vue + webpack 的准备项目 (插件、配置详解)(二)webpack的配置说明