手动搭建Vue环境

时间:2024-01-12 18:07:56

Vue+webpack+babel环境搭建

github地址

https://github.com/haoyongliang/webpack-babel-Vue

1.首先要了解Vue项目结构

  1. 简单的目录结构:
  2. |-index.html
  3. |-main.js 入口文件
  4. |-App.vue vue文件,官方推荐命名法
  5. |-package.json 工程文件(项目依赖、名称、配置)npm init --yes 生成
  6. |-webpack.config.js webpack配置文件

2.在webpack.config.js中指定入口文件和输出文件

  1. module.exports = {
  2. entry:'./main.js',//指定入口文件
  3. output : {
  4. path:__dirname,
  5. filename:'boundle.js'//输出文件
  6. }
  7. }

3.在index.html中引入生成的boundle.js

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Title</title>
  6. </head>
  7. <body>
  8. <app></app>
  9. <script src="boundle.js"></script>
  10. </body>
  11. </html>

4.安装环境

a.webpack安装配置

  1. cnpm install webpack --save-dev //不带服务器版本
  2. cnpm install webpack-dev-server --save-dev //带服务器版本

注意 两个都要安装

在package.json中配置开发命令

  1. "scripts":{
  2. "dev" : "webpack-dev-server --inline --hot --port 8082"
  3. }

–inline:文件修改后则重启

–hot 模块热载

–port指定端口

b.将App.vue 变成正常代码

  1. cnpm install vue-loader@8.5.4 --save-dev
  2. cnpm install vue-html-loader --save-dev
  3. cnpm install css-loader --save-dev
  4. cnpm install vue-style-loader --save-dev
  5. cnpm install vue-hot-reload-api@1.3.2 --save-dev

vue-hot-reload-api 每次改完后验证代码有没有错误功能

在webpack.config.js中添加

  1. module:{
  2. loaders:[
  3. {test:/\.vue$/,loader:'vue'},//将.vue文件通过vue-loader变成正常代码
  4. {test:/\.js$/,loader:"babel",exclude:/node_modules/},//将除了node_modules文件夹下的.js文件通过babel转换成兼容代码
  5. ]
  6. }

c.配置babel编译环境

安装babel相关程序

  1. cnpm install babel-loader --save-dev
  2. cnpm install babel-core --save-dev
  3. cnpm install babel-plugin-transform-runtime --save-dev
  4. cnpm install babel-preset-es2015 --save-dev
  5. cnpm install babel-runtime --save-dev

在webpack.config.js中添加

  1. //配置ES6编译环境
  2. babel:{
  3. presets:['es2015'],
  4. plugins:['transform-runtime']//每次改完代码时时编译插件
  5. }

d.安装Vue

  1. cnpm install vue@1.0.28 --save

5.在App.vue中添加代码

  1. <template>
  2. <h1>welcome Vue</h1>
  3. </template>
  4. <script>
  5. </script>
  6. <style>
  7. body{
  8. background: #abc
  9. }
  10. </style>

6.在入口文件main.js中添加代码

  1. import Vue from 'vue';
  2. import App from './App.vue';
  3. new Vue({
  4. el:"body",
  5. components:{
  6. app:App
  7. }
  8. });

7.配置项目规范约束和git忽略文件

.gitignore

.editorconfig