搭建项目（单文件手动搭建项目）

一、单文件组件简介

1、什么是.vue文件

.vue文件是单文件组件，是vue.js自定义的一种文件格式，一个.vue文件就是一个单独的组件。在文件内封装了组件相关的代码。

.vue文件包括三部分：

• a) <template> 写html代码
• b) <style> 写css代码
• c) <script> 写js代码（建议写ES6语法）

 

2、vue-loader

• 浏览器本身不认识.vue文件，需要对.vue文件进行加载解析，此时需要使用vue-loader来实现。
• 类似的loader还有很多，例如：html-loader（加载html代码）、css-loader、style-loader、babel-loader等。
• 需要注意的是 vue-loader是基于webpack的。

 

3、webpack

• webpack是一个前端资源模块化加载器和打包工具，它能够把各种资源都作为模块来使用和处理。
• 实际上，webpack是通过不同的loader将这些资源加载后打包，然后输出打包后的文件。
• 简单来说，webpack就是一个模块加载器，所有资源都可以作为模块来加载，最后打包输出。
• webpack官网：https://webpack.docschina.org/
• webpack有一个核心配置为文件：webpack.config.js，必须放在项目根目录下。

 

二、代码实现

1、创建项目。

创建项目并命名为webpack-demo，项目的目录结构如下：

webpack-demo

　　| - index.html

　　| - main.js 　　入口文件

　　| - App.vue　　vue文件

　　| - package.json　　工程文件

　　| - webpack.config.js　　webpack配置文件

　　| - .babelrc　　Babel配置文件

 

创建对应的文件步骤如下：

1）新建index.html

　　直接手动创建，取名为index.html

 

2）新建main.js

　　直接手动创建，命名为main.js

 

3）新建App.vue

　　直接创建，命名为App.vue

 

4）新建package.json

　　第一步：进入webpack-demo的文件目录

　　

 　　第二步：运行npm init --yes，运行完成后，自动生成package.json文件。

　　

 

　　第三步：打开并查看自动生成的package.json文件。

　　

 

5）新建webpack.config.js

　　直接创建，命名为webpack.config.js

　　

 

6）新建.babelrc文件

 　　直接创建，命名为.babelrc

　　

 

 2、分别写对应文件中的代码

1）编写index.html

 

2）编写App.vue

 

3）安装相关模板

a) 安装vue（生产依赖）

　　运行cnpm install vue --S（前面添加 cd C:\Users\Monica.Zhao\Desktop\vueStudy\webpack-demo）

安装vue完成后：1.自动生成node_modules文件夹。文件夹内含有vue文件。2.package.json文件中显示生成的vue

 

b) 安装webpack（开发依赖）

　运行cnpm install webpack -D （安装webpack开发依赖）

　运行cnpm install webpack-dev-server -D （安装启用服务器）

 

c) 安装vue-loader（开发依赖，解析vue）

　运行cnpm install vue-loader -D

　运行cnpm install vue-html-loader -D

 

d) 安装css-loader（开发依赖，解析css）

  运行cnpm install css-loader -D

  运行cnpm install vue-style-loader -D

  运行cnpm install file-loader -D　　（字体字库的加载）

 

e) 安装babel模块（开发依赖，ES6新语法需要安装babel模块）

　运行cnpm install babel-loader -D

　运行cnpm install babel-core -D

　运行cnpm install babel-preset-env -D　　//根据配置的运行环境自动启用需要的babel插件

   运行cnpm install vue-template-compiler -D　　//预编译模板

 

以上11个开发依赖的模块合并安装：

运行 cnpm install  -D webpack webpack-dev-server  vue-loader vue-html-loader css-loader vue-style-loader file-loader babel-loader  babel-core  babel-preset-env vue-template-compiler

安装完成后：

1.在node_modules文件夹中可以看到，自动生成了很多文件，这就是安装的模板。2.在package.json文件内容中自动生成11个开发依赖。

 

 

4）编写main.js

 

 

 5）编写webpack.config.js文件

 

webpack.config.js配置完成后，在index.html中引入输出文件build.js

 

  6）编写.babelrc文件

 

 

 

 

  7）编写package.json文件

以下是默认自动生成的package.json文件。

 

 

 

将自动生成的代码中 "test": "echo \"Error: no test specified\" && exit 1" 修改成 "dev": "webpack-dev-server --open --hot --port 8800"

dev  　　表示自定义启动服务器的名称。

webpack-dev-server  　　表示webpack服务器。

--open 　　表示启动服务器。

--hot　　表示热加载（修改页面后浏览器自动刷新）

--post　　表示指定端口号。

--post 8800 　　表示指定端口号是8800。

 

 3、运行测试

运行npm run dev （这里的dev就是在package.json里面自定义的服务器名称），出现如下报错。

 

经过各种查找，发现是babel的版本问题。此时运行cnpm install babel-loader@7.1.5 -D即可。

注意：babel-core和babel-loader有版本对应关系：babel-core6对应babel-loader7，babel-core7对应babel-loader8。

修改后的版本对应关系：

 

 再次运行cnpm run dev，报错如下。

 

解决方案：运行cnpm install babel-preset-env 重新安装该模块。

 

再次npm run dev