手动搭建Vue环境

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手动搭建Vue环境相关的知识，希望对你有一定的参考价值。

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-[email protected].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-[email protected].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 [email protected].0.28 --save

5.在App.vue中添加代码

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

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

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

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

.gitignore
.editorconfig





以上是关于手动搭建Vue环境的主要内容，如果未能解决你的问题，请参考以下文章

Vuejs之开发环境搭建

vue环境搭建后，简单的单页面切换详细步骤，代码的放置在啥地方

spring练习，在Eclipse搭建的Spring开发环境中，使用set注入方式，实现对象的依赖关系，通过ClassPathXmlApplicationContext实体类获取Bean对象(代码片段

Vue/cli 手脚架搭建项目

脚手架搭建的vue2项目中使用sass

Electron + vue搭建项目