手动搭建Vue环境

最新推荐文章于 2023-06-15 15:12:56 发布
最新推荐文章于 2023-06-15 15:12:56 发布
阅读量65 收藏
点赞数
文章标签： javascript webpack json ViewUI
原文链接：http://www.cnblogs.com/haoyongliang/p/55871e7d94faef404d45653c28457452.ht
版权

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>
  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
 
 
 
 
 
  
 
 
 
 

 

转载于:https://www.cnblogs.com/haoyongliang/p/55871e7d94faef404d45653c28457452.html

                

        

        




    




    

      

        

            

              
                
                  weixin_34335458
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
webpack4手动搭建Vue开发环境实现todoList项目的方法

				
			

			

				

					10-16
				

			

		

		

			
				
主要介绍了webpack4手动搭建Vue开发环境实现todoList项目的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

			
		

	



                

              
                



	

		

			

				
					
hand-vue3-project:Vue 3.x + Webpack 5.x 手动搭建开发环境

				
			

			

				

					05-26
				

			

		

		

			
				
Vue 3.x + Webpack 5.x 手动搭建 Vue 开发环境

			
		

	



                


  
              

                


	

		

			

				
					
如何配置Vue基础环境

				
			

			

				

					
				

				

					06-15
					
					240
					
				

			

		

		

			
				
小白如何搭建Vue环境

			
		

	





	

		

			

				
					
如何配置vue的环境

				
			

			

				

					weixin_42596011的博客
				

				

					02-14
					
					139
					
				

			

		

		

			
				
要配置 Vue 的开发环境，需要以下步骤：

安装 Node.js，因为 Vue 的开发需要基于 Node.js 环境。

全局安装 Vue CLI，可以使用以下命令：
npm install -g @vue/cli



...

			
		

	



		

			
		



	

		

			

				
					
搭建VUE项目

				
			

			

				

					H1716762493的博客
				

				

					07-26
					
					208
					
				

			

		

		

			
				
4）自定义模块=》通过键盘上下箭头（进行却换）=》在同回车键确定（表示选中）vuecreate项目名称//先切到想要创建项目的目录再执行这句创建项目。3、配置镜像npminrm-g//淘宝镜像。1、全局安装vue脚手架（全局安装@vue/cli）vue--version//检测vueCli版本。nrmtest//检测每个镜像源的连接速度。nrmuse指定镜像源名称//切换镜像源。（6）请选择vue的版本=》vue2。二、搭建vue项目环境（vue2）...

			
		

	





	

		

			

				
					
手把手搭建Vue项目-完整步骤

				
			

			

				

					前端菜菜DayDayUp的博客
				

				

					08-29
					
					1364
					
				

			

		

		

			
				
如何搭建Vue项目-完整步骤

			
		

	





	

		

			

				
					
vue开发环境配置

				
			

			

				

					weixin_46382293的博客
				

				

					10-10
					
					779
					
				

			

		

		

			
				
vue开发环境配置

			
		

	





	

		

			

				
					
vue-webpack项目初始化手动搭建源码

				
			

			

				

					05-01
				

			

		

		

			
				
vue-webpack组件模块化项目初始搭建源代码，新学vue的同学可以借鉴，下载导入VSCode可以直接npm run dev 运行，可以参考博主博客 "VUE-Webpack基础知识点汇总"见详情内容指导。

			
		

	





	

		

			

				
					
基于webpack4babel7vue2手动搭建开发环境

				
			

			

				

					08-10
				

			

		

		

			
				
基于webpack4 babel7 vue2手动搭建开发环境

			
		

	





	

		

			

				
					
从零开始搭建vue开发环境,请手动配置Vue开发环境

				
			

			

				

					goodutils的博客
				

				

					09-11
					
					531
					
				

			

		

		

			
				
你是用手脚架搭的吗？出来这个页面说明你成功的完成了第一步，进入到vue的世界了，接下了你想干嘛就干嘛了，环境已经搭建完成，你需要做的就是将你想放的东西放进去而已。vue都是以组件形式将页面导入进入的，import引入组件，在components中声明，然后在中使用就行了。谷歌人工智能写作项目：小发猫你是用手脚架搭的吗？出来这个页面说明你成功的完成了第一步，进入到vue的世界了，接下了你想干嘛就干嘛了，环境已经搭建完成，你需要做的就是将你想放的东西放进去而已。

			
		

	





	

		

			

				
					
vue项目打包之开发环境和部署环境的实现

				
			

			

				

					11-21
				

			

		

		

			
				
项目开发阶段和生产环境可能不一样
如前端在开发阶段，接口可能是自己使用 node.js 搭建的服务器，API 返回的也都是假数据，等后台接口开发好后，再切换成后台提供的接口，等测试没有问题，服务端上线后，又要改成正式的接口

手动改动接口，既繁琐又容易出错（当然，区别还不止这些）
优雅的解决方案是，分别使用两个入口文件，一个用于开发环境打包，一个用于生产环境打包
具体来说，分为下面几个步骤
1、创建入口文件
在 src 目录下新建 prod_env.js 和 dev.env.js
将main.js 中代码分别拷贝到这两个文件中，并删除 main.js
2、配置打包时的入口文件
项目根目录下新建

			
		

	





	

		

			

				
					
python和vue结合开发前端,请手动配置Vue开发环境

				
			

			

				

					神器榜
				

				

					09-12
					
					2141
					
				

			

		

		

			
				
原理：设置一个专用的的全局变量模块文件，模块里面定义一些变量初始状态，用exportdefault暴露出去，在里面使用Vue.prototype挂载到vue实例上面或者在其它地方需要使用时，引入该模块便可。全局变量模块文件：文件：constserverSrc='';constuserSite="中国钓鱼岛";

			
		

	





	

		

			

				
					
vue配置开发环境，测试环境，生产环境

				
			

			

				

					Lc_style的博客
				

				

					04-18
					
					6371
					
				

			

		

		

			
				
开发环境：一般是本地开发时所使用的环境，改动很频繁

测试环境：较为稳定的版本，一般用于部署测试

生产环境：发布到线上的版本


配置不同环境变量可避免切换不同环境时手动修改项目配置，请求url等，vue项目中可先在package.json文件中这样设置：


"scripts": {
    "dev": "vue-cli-service serve --mode development",  //开发环境
    "dev:test": "vue-cli-service serve --mode t.

			
		

	





	

		

			

				
					
配置Vue的开发环境

				
			

			

				

					lxj07215212的博客
				

				

					11-24
					
					451
					
				

			

		

		

			
				
vue开发环境配置

登录node.js官网  https://nodejs.org/zh-cn/ 下载node.js

安装（建议安装包不要放在C盘下面）
打开cmd：
输入命令：node -v
输出：node.js的安装版本
 4.配置


查看是否配置成功，输入命令：

显示你刚才创建文件夹的路径表示配置成功



...

			
		

	





	

		

			

				
					
如何搭建vue开发环境

					
热门推荐

				
			

			

				

					小积累
				

				

					06-21
					
					1万+
					
				

			

		

		

			
				
主要介绍vue开发工具、环境搭建、系统运行等内容。

			
		

	





	

		

			

				
					
Vue的环境配置

				
			

			

				

					m0_51528800的博客
				

				

					05-20
					
					3639
					
				

			

		

		

			
				
Vue的环境配置
因为在学习之后需要运用所学知识来完成自己的项目，这篇博客就来说说我是如何配置Vue环境的。
1、打开vue的官网：https://cn.vuejs.org/Vue官网

2、打开学习->教程->安装。

3、这里我们选择开发版本，因为开发版本能在你进行开发时提示你的错误信息，比较方便。
4、创建自己的项目文件，我这里命名为Teacher management system。

5、在vs code中打开这个项目文件

6、这里为了方便举例，在打开的项目文件下创建一个manage

			
		

	





	

		

			

				
					
手动搭建vue环境

				
			

			

				

					qq_31440885的博客
				

				

					12-07
					
					230
					
				

			

		

		

			
				
啊！天有多高，你有多骚。
~嗯·啊，玩笑话！最近想做那个啥了，嘿嘿，想手动搭建一下vue的项目。
~嗯·啊，该如何入手呢？不清楚，自己本人也是在学习阶段吗！come bady，我要重新过一遍vue了，再那个，那个和‘她’深度了解一下。
开始撒！！！！！！！！！！！！！！！！！！！！！！！！！！！！
那个第一步，我也不知道该干啥，学习呗！！！！！！！
第一步：
全局安装sudo npm instal...

			
		

	





	

		

			

				
					
Vue开发环境配置

				
			

			

				

					qq_43776195的博客
				

				

					08-08
					
					1万+
					
				

			

		

		

			
				
文章目录Vue开发环境配置1、Node.js1.1 Node.js 下载1.2 Node.js 安装1.3 Node.js 配置1.3.1 其他环境配置（可跳过）1、创建新文件夹2、执行命令，设置全局模块和缓存位置3、配置环境变量4、测试1.3.2 npm配置国内镜像源：淘宝镜像1.3.3 安装cnpm2、安装Vue2.1 命令3、安装 Vue-CLI（Vue脚手架）3.1 安装3.2 验证3.3 卸载（重装）vue-cli 或 Vue.js4、参考博客
先来欣赏一下：

欣赏完了，开撸~~
Vue开发环境

			
		

	





	

		

			

				
					
手动搭建VUE开发环境

				
			

			

				

					aiyawei123的博客
				

				

					06-18
					
					1248
					
				

			

		

		

			
				
1、搭建webpack基础环境

1.1初始化项目


npm init

此时会生成一个webpack.json文件，主要是生成项目的基础信息

1.2安装webpack及手脚架


npm install webpack webpack-cli -D

-D命令要使用大写，否则识别不出来，会默认安装到生产环境中

2、开始配置功能

2.1配置ES6/7/8转ES5代码


npm insta...

			
		

	





	

		

			

				
					
前端环境搭建 vue

					
最新发布

				
			

			

				

					09-06
				

			

		

		

			
				
为了搭建 Vue 的前端环境，你需要进行以下步骤：

1. 确保你已经安装了 Node.js，你可以在命令行中输入 `node -v` 来检查是否已经安装。
2. 安装 Vue CLI，可以使用以下命令进行全局安装：
   ```
   npm install -g @vue/cli
   ```
3. 创建一个新的 Vue 项目，执行以下命令：
   ```
   vue create project-name
   ```
   其中，`project-name` 是你想要给项目起的名字，你也可以使用默认的配置或者手动选择一些配置选项。
4. 进入项目目录：
   ```
   cd project-name
   ```
5. 启动开发服务器：
   ```
   npm run serve
   ```
   这将会在本地启动一个开发服务器，并且自动打开一个地址供你访问。
   
通过以上步骤，你就成功搭建了一个基本的 Vue 前端环境。你可以开始编写 Vue 组件和页面了。如果你需要进一步了解 Vue 的开发，请参考 Vue 官方文档。

			
		

	



              



  
“相关推荐”对你有帮助么？

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

                
 1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
 2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

              

            

          

      

      余额充值