【不使用vue-cli脚手架搭建Vue2.0项目环境】

最新推荐文章于 2024-06-25 21:35:34 发布

兰舟啵啵

最新推荐文章于 2024-06-25 21:35:34 发布

阅读量1.7k

点赞数 3

文章标签： vue.js webpack vue-cli3

本文链接：https://blog.csdn.net/qq_46106080/article/details/121994221

版权

本文详细介绍了如何不使用vue-cli，从初始化项目到配置webpack，再到安装和使用vue-router、vuex、axios和element-ui，一步步构建Vue2.0项目环境。主要步骤包括初始化项目、安装依赖、配置项目启动脚本、创建HTML和src文件夹、配置webpack，以及后续添加的vuex、axios和element-ui。

摘要由CSDN通过智能技术生成

项目创建目录结构
在这里插入图片描述

一、初始化

npm init -y

二、安装依赖

2.1生产环境依赖

npm install vue vue-router -S

2.2开发环境依赖

npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-compiler -D

一些依赖的作用：

babel-core 的作用是把 js 代码分析成 ast ，方便各个插件分析语法进行相应的处理。有些新语法在低版本 js 中是不存在的，如箭头函数，rest 参数，函数默认值等，这种语言层面的不兼容只能通过将代码转为 ast，分析其语法后再转为低版本 js。首先安装 babel-core。

babel-loader作用：使用babel-loader处理js文件，会将es5以上的语法进行转义(无法转义es6 API) babel-loader必须和babel-core结合使用，babel-core封装了babel-loader需要用到的api

css-loader是帮助webpack打包处理css文件的工具

html-webpack-plugin

为html文件中引入的外部资源如script、link动态添加每次compile后的hash，防止引用缓存的外部文件问题

可以生成创建html入口文件，比如单页面可以生成一个html文件入口，配置N个html-webpack-plugin可以生成N个页面入口

node-sass 允许用户以令人难以置信的速度将.scss文件本地编译为css，并通过连接中间件自动编译。Sass是一种预处理器脚本语言，可以解释或编译成层叠样式表（CSS）

sass-loader就是为了转换和编译scss文件 node-sass是核心插件

style-loader是将css-loader打包好的css代码以<style>标签的形式插入到html文件中

vue-loader会解析文件，提取出每个语言块，如果有必要会通过其他loader处理，最后将他们组装成一个commonjs模块

vue-template-compiler作用：该模块可用于将 Vue 2.0 模板预编译为渲染函数（template => ast => render），以避免运行时编译开销和 CSP 限制。大都数场景下，与 vue-loader一起使用，只有在编写具有非常特定需求的构建工具时，才需要单独使用它。内容安全策略 (CSP) 是一个附加的安全层，用于帮助检测和缓解某些类型的攻击，包括跨站脚本 (XSS) 和数据注入等攻击。

webpack模块打包工具

webpack-cli用于在命令行中运行webpack，cli即命令行接口（Command Line Interface）

webpack-dev-server可以为webpack打包生成的资源文件提供web服务

三、配置项目启动执行脚本命令

3.1在package.json文件scripts中加入代码

"scripts": {
   
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --config webpack.config.js"
    },

3.2并将"main":“index.js"改为"main”: “webpack.config.js”,（后续补：现发现不改也可以）

3.3最终完整的package.json内容为

{
   
  "name": "vue2",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --config webpack.config.js"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
   
    "vue": "^2.6.14",
    "vue-router": "^3.5.3"
  },
  "devDependencies": {
   
    "babel-core": "^6.26.3",
    "babel-loader": "^8.2.3",
    "css-loader": "^6.5.1",
    "html-webpack-plugin": "^5.5.0",
    "node-sass": "^7.0.0",
    "sass-loader": "^12.4.0",
    "style-loader": "^3.3.1",
    "vue-loader": "^15.9.8",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.65.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.6.0"
  }
}

四、在项目根目录中创建文件index.html

//index.html 在body元素下增加id为app的div元素，用于挂载vue实例
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>vue2</title>
</head>

<body>
  <div id="app"></div>
</body>

</html>

五、创建src文件夹

5.1在src底下创建

App.vue

main.js

views/home.vue

views/content.vue

router/index.js

5.2main.js 引入vue vue-router 样式构建vue实例等

import Vue from 'vue'
import App from './App.vue'
import router from './router'

new Vue({
   
  el: '#app',
  router,
  render: h => h(App)
})
// render: h => h(App)是ES6的写法，其实就是如下内容的简写：

// render: function (createElement) {
   
//   return createElement(App);
// }

// 然后ES6写法,

最低0.47元/天解锁文章

兰舟啵啵

关注

3
点赞
踩
10

收藏

觉得还不错? 一键收藏
1
评论
【不使用vue-cli脚手架搭建Vue2.0项目环境】

项目创建目录结构一、初始化npm init -y二、安装依赖2.1生产环境依赖npm install vue vue-router -S2.2开发环境依赖npm install babel-loader babel-core vue-loader node-sass sass-loader css-loader style-loader webpack webpack-cli webpack-dev-server html-webpack-plugin vue-template-c
复制链接

扫一扫