Vue前端框架搭建

已于 2022-08-24 14:06:40 修改
阅读量2.8k 收藏 5
点赞数 1
分类专栏： 前端深入浅出 文章标签： 前端框架 vue.js 前端
于 2022-08-24 14:02:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/u012069313/article/details/126283833
版权

目录

一、安装 NodeJS

见 Windows下安装NodeJS。

二、安装 vue-cli

1.vue-cli 2.x 升级到 3.x

（1）卸载 2.x 版本

npm uninstall -g vue-cli

（2）安装

npm install -g @vue/cli

（3）查看版本

vue -V


                

                
                
        

    

  


        

            

                

                

                了解本专栏
                
                
                  
                订阅专栏 解锁全文
                 
                
                    
                    超级会员免费看
                
            

            
            
            
        


    



                



	

		

			

				
					
vue搭建简易前端

				
			

			

				

					m0_71733565的博客
				

				

					08-28
					
					1147
					
				

			

		

		

			
				
前文初步了解了组件库Element Plus，现在正式开始使用vue搭建大事件前端页面，后端见（springboot以及后续项目专栏）

			
		

	



                

            
              



	

		

			

				
					
vue3框架搭建

				
			

			

				

					weixin_48022521的博客
				

				

					01-29
					
					1839
					
				

			

		

		

			
				
目前预估是这些有部分还没用到就先不写了，等用到了再补充。

			
		

	



              


  
              

                


	

		

			

				
					
前端技术栈 —— Vue框架 —— (一)快速上手

				
			

			

				

					键盘国治理专家的博客
				

				

					12-18
					
					4406
					
				

			

		

		

			
				
快速上手Vue

			
		

	





	

		

			

				
					
如何从零开始搭建一个 Vue.js 项目（新新手指南，超级详细）

					
最新发布

				
			

			

				

					mark0758的博客
				

				

					04-11
					
					1257
					
				

			

		

		

			
				
从零开始构建vue。开发组件（如计数器）熟悉 Vue 语法。（可选）添加路由支持多页面。构建并部署到生产环境。通过以上步骤，你已经搭建了一个功能完整的 Vue 项目！接下来，可以根据需求扩展功能，如添加状态管理、API 调用或复杂交互。Vue 的生态丰富且文档友好，持续学习和实践会让你更得心应手。如果你需要更详细的某部分（如 Pinia 集成、TypeScript 配置或部署细节），可以告诉我，我会进一步补充！

			
		

	



		

			
		



	

		

			

				
					
前端Vue框架搭建

				
			

			

				

					啊鹏的博客
				

				

					03-23
					
					3707
					
				

			

		

		

			
				
1.前言
对于后端开发工作者来说，比较为难的一定是前端部队，除了有专门负责前端开发的大公司，其余的小公司基本上都是前后端都要自己写的。以前对后端开发者比较友好的Layui框架作者也不维护了，我在第一年工作的时候就是用的Layui，但是对于前端的了解也只是停留在CV阶段。最近我们公司在重做之前的一版系统，前端使用的是Vue框架，搭配的是Element-ui组件。我负责的是后端代码。但是空余时间也大致看了一下前端Vue框架的搭建，搭建好之后完全可以当个轮子使用。
1.npm，yarn
这两者的区别对于搞前端的朋

			
		

	





	

		

			

				
					
搭建vue前端框架

				
			

			

				

					weixin_43254742的博客
				

				

					03-07
					
					366
					
				

			

		

		

			
				
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车；Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车；Install vue-router ==> 是否要安装 vue-router，项目中肯定要使用到 所以Y 回车；Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车；测试vue框架项目是否搭建成功。

			
		

	





	

		

			

				
					
前端Vue项目框架搭建

				
			

			

				

					xxh20171777的博客
				

				

					12-14
					
					853
					
				

			

		

		

			
				
前端Vue项目框架搭建Vue项目搭建方式vue uivue create
Vue项目搭建方式
vue项目搭建通过vue脚手架主要有两种方式：图形界面的vue ui 以及命令行形式的vue create。
vue ui

选择任意文件夹作为项目框架路径（注意：最好路径中不要出现中文）
选中该文件夹，按住Shift键右击，点击“在此处打开Powershell”或者“在此处打开命令窗口” 打开小黑板
vue -version判断系统是否有vue脚手架
vue ui

安装ElementUI插件


安装依赖axi

			
		

	





	

		

			

				
					
vue搭建前端框架

				
			

			

				

					id_name的博客
				

				

					07-13
					
					9950
					
				

			

		

		

			
				
【代码】vue搭建前端框架。

			
		

	





	

		

			

				
					
前后端框架搭建之IDEA SpringBoot框架搭建&VSCODE VUE前端框架搭建(一)

				
			

			

				

					qq_42306286的博客
				

				

					03-25
					
					3321
					
				

			

		

		

			
				
SpringBoot框架搭建

初始化搭建
① file->new->project->spring Initializr

②next-> （修改name为自己想要的名字name）

（我之前有个模就直接创建了，没有模型的）
Web 选个 web

TemPlateEngines 选个 thymeleaf

Sql 选个 mysql jdbc mybatis

...

			
		

	





	

		

			

				
					
一文教你学会vue前端项目创建与开发

				
			

			

				

					任聪聪的博客
				

				

					09-07
					
					1609
					
				

			

		

		

			
				
说明：自定义的项目结构对于我们后期的开发工作有着至关的作用，一个好的目录结构及配置能够在后续的工作中起到事半功倍的效果。timeout: 5000,//超时时间headers: {},});// 请求拦截器});},error => {// 响应拦截器},error => {},npm run dev 运行开发环境npm run b:prod 构建生产环境的代码。npm run b:stage 构建阶段环境的代码。

			
		

	





	

		

			

				
					
【前端框架】vue~环境搭建

				
			

			

				

					不务正业的野猴子
				

				

					04-05
					
					580
					
				

			

		

		

			
				
安装node.js
下载地址：https://nodejs.org/en/download/ 
注：无需配置，可直接安装，node.js安装时会自动安装npm，故无需单独安装npm
安装成功后可使用如下命令查看node.js和npm的版本
node -v 
npm -v

安装成功后系统环境变量path中会自动添加node.js的安装目录
D:\Program Files\nodejs;

由于本...

			
		

	





	

		

			

				
					
一个vue前端框架搭建

				
			

			

				

					SSWmouse的博客
				

				

					11-16
					
					713
					
				

			

		

		

			
				
简单vue项目搭建

			
		

	





	

		

			

				
					
vue3 + element 从0到1搭建前端基础框架

				
			

			

				

					weixin_42854769的博客
				

				

					12-04
					
					4137
					
				

			

		

		

			
				
往往从0到1开发项目时发觉无从下手，或者很可能一步一个坑，因为大多基础框架公司已经搭建完毕的，新加入的成员也都是在此基础上进行功能模块的拓展。网上也鲜有详尽的全流程参考，多是某个局部功能的搭建，因此整理了一份包含以下方面的前端基础框架全流程搭建要义。

			
		

	





	

		

			

				
					
vue+webpack搭建前端框架

				
			

			

				

					滕益宏的博客
				

				

					11-22
					
					438
					
				

			

		

		

			
				
https://blog.csdn.net/fungleo/article/details/77575077

			
		

	





	

		

			

				
					
【前端】搭建Vue项目

				
			

			

				

					weixin_45626095的博客
				

				

					08-21
					
					468
					
				

			

		

		

			
				
在系统中安装好了node以及nvm进行node版本管理。

			
		

	





	

		

			

				
					
最新VUE前端开发框架搭建教程_代码大麦

				
			

			

				

					代码大麦
				

				

					06-29
					
					524
					
				

			

		

		

			
				
1、使用node.js版本 v14.17.1

安装步骤只需要根据node.js 步骤安装即可

2、使用npm（需要安装node环境）全局安装webpack，打开命令行工具输入：npm install webpack -g或者（npm install -g webpack），安装完成之后输入webpack -v，如下图，如果出现相应的版本号，则说明安装成功。

注意：webpack 4.X 开始，需要安装 webpack-cli 依赖 ,所以使用这条命令 npm install webpack web..

			
		

	





	

		

			

				
					
浅谈Vue前端项目搭建

				
			

			

				

					qq_38618445的博客
				

				

					05-31
					
					234
					
				

			

		

		

			
				
提示：内容仅代表个人观点，如有不对请多指教。



文章目录

前言

一、Node.js

二、vue脚手架

三、初始化项目

四、启动项目


前言

该文章用于记录前端项目搭建的流程，后续会同步更新，有用的话请多多收藏。

一、Node.js

官网地址：下载 | Node.js 中文网

对应的 NPM（Node Package Manager），是Node.js 环境中的软件包管理器。随 Node.js 一起被安装，因此 NPM 和 Node 是两个独立的应用程序，只是被捆绑安装了，两个的版本.

			
		

	





	

		

			

				
					
搭建Vue框架

				
			

			

				

					qq_43086723的博客
				

				

					06-07
					
					150
					
				

			

		

		

			
				
搭建Vue框架建立脚手架局部样式与全局样式组件库异步请求跨域问题Vuex
建立脚手架

搭建 NPM 私服。
使用 Node 环境开发 CLI 工具，参考我自己写过的一篇 -【 搭建脚手架—生成前端工程】。
基于 @vue/cli 搭建基础的模板（大家都比较了解，节省开发时间，远胜于从零开始搭建）。
根据业务需求定义各种开发中可能用到的功能（组件库、状态管理、过滤器、指令、CSS内置变量、CSS Mixins、表单验证、工具函数等）。

局部样式与全局样式
局部样式
<style lang="scss

			
		

	





	

		

			

				
					
前端搭建vue项目

				
			

			

				

					sake_pipi的博客
				

				

					03-05
					
					980
					
				

			

		

		

			
				
1、打开node.js官网https://nodejs.org/en/下载当前版本node.js并安装到电脑中，安装方式为"无脑安装之下一步"



安装完成后检验是否安装node.js:

win+r输入cmd打开dos窗口输入node -v回车之后会显示node.js版本号，证明电脑安装成功了！

npm集成在node.js中，在dos窗口输入npm -v回车之...

			
		

	





	

		

			

				
					
如何搭建vue前端框架

				
			

			

				

					03-30
				

			

		

		

			
				
搭建Vue前端框架的步骤如下：

1. 安装Node.js和npm：Node.js是一种JavaScript运行环境，npm是JavaScript包管理器。

2. 安装Vue CLI：Vue CLI是Vue.js官方提供的脚手架工具，可以快速创建Vue.js项目。使用以下命令安装：

   ```
   npm install -g @vue/cli
   ```

3. 创建Vue项目：使用以下命令创建一个新的Vue项目：

   ```
   vue create my-project
   ```

   在创建过程中，会提示你选择项目的配置项。你可以选择使用默认配置，也可以根据自己的需求进行自定义配置。

4. 运行Vue项目：使用以下命令启动Vue项目：

   ```
   cd my-project
   npm run serve
   ```

   然后在浏览器中打开http://localhost:8080，就可以看到Vue项目的欢迎页面了。

5. 开始编写Vue组件：Vue组件是Vue的核心概念，可以将UI界面划分为一些独立、可复用的组件。可以在src/components目录下创建Vue组件，并在需要使用组件的地方进行引用。

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

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

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
奔跑吧邓邓子

			
你的鼓励将是我创作的最大动力

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值