精华内容
下载资源
问答
  • 2021-12-25 13:35:47

    我们使用Vue做项目时,基本都是前后端分离的,所以项目布署有时是前后单独部署。因此前端开发人员很有必要熟悉一下项目部署的流程。

    Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题。

    一、准备工作——服务器和nginx配置使用

    1、准备一台服务器

    一般我们在布署时,服务器已经开通好了,我们进入服务器配置就好了。

    2、安装nginx

    一般而言,nginx后端会安装好。我们在此熟悉一下安装过程

    # 安装
    sudo apt-get install nginx
    
    #安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功
    
    # 启动
    sudo service nginx start

    启动后,正常情况下,直接访问`http://服务器ip`或`http://域名`。如果出现`Welcome to nginx!`的页面,说明成功了!

    3、nginx配置文件`nginx.conf`

    linux系统下的配置文件通常会存放在/etc目录下,nginx的配置文件就在/etc/nginx文件夹,打开文件/etc/nginx/nginx.conf。

    如图所示:

     可以看到默认情况下,nginx代理的根目录是/var/www/html,输入`http://服务器ip`会访问这个文件夹下的文件,然后会根据index的配置值来找默认访问的文件,比如index.html、index.htm之类。

    我们可以更改root的值来修改nginx服务代理的文件夹:

    1、创建文件夹/www,并创建index.html,写入"Hello world"字符串

    mkdir /www
    echo 'Hello world' > /www/index.html​

    2、修改root值为 /www

     

    3、sudo nginx -t 检查nginx配置是否正确

     如果出现successfull,说明成功

    4、重启nginx

    nginx配置好后,要重启才生效

    nginx -s reload

    5、再次访问页面,发现页面内容已经变成了我们创建的index.html,里面内容是Hello World

    二、Vue项目打包并同步文件到服务器

    1、打包

    一般情况下,使用vue-cli创建的项目,package.json里的script应该已经配置了build指令,直接执行

    yarn build

    或者

    npm run build

    `build`命令默认是打包生产环境,如果想指定环境可以这样配置:

    "build:stage": "vue-cli-service build --mode staging",// 测试环境
    "build:prod": "vue-cli-service build --mode production", // 生产环境

    npm run build:stage  测试环境打包
    npm run build:prod  生产环境打包

    2. 同步到远程服务器

    我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹,剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里,比如同步到之前步骤中创建的/www。
    同步文件可以在git-bash或者powershell使用scp指令,如果是linux环境开发,还可以使用rsync指令:

    scp -r dist/* root@ip地址:/www
    或
    rsync -avr --delete-after dist/* root@ip地址:/www

    注意这里以及后续步骤是使用root用户远程同步,应该根据你的具体情况替换root和ip(ip换为你自己的服务器IP)。 

    为了方便,可以在package.json脚本中加一个push命令,以使用yarn为例(如果你使用npm,则push命令中yarn改成npm  run即可):

    "scripts": {
        "build": "vue-cli-service build",
        "push": "npm run build && scp -r dist/* root@ip地址:/www"
      },

    这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题,就是命令执行的时候要求输入远程服务器的root密码(这里使用root来连接远程的,你可以用别的用户)。

    3、同步ssh key

    为了避免每次执行都要输入root密码,我们可以将本机的ssh同步到远程服务器的`authorized_keys`文件中。

    a、生成ssh key:使用git bash或者powershell执行`ssh-keygen`可以生成ssh key。会询问生成的key存放地址,直接回车就行,如果已经存在,则会询问是否覆盖。然后会让你输入私钥的密码,直接回车就行(如果设置了私钥密码,每次打包上传还要输这个密码;如果设置了后期也可以取消)。

     

     我这里因为之前已经生成了私钥(默认名称),所以新的私钥就改了个名字

    原来的私钥:/c/Users/chenlim/.ssh/id_rsa

    新的私钥:/c/Users/chenlim/.ssh/id_rsa_prd

    b、回车后就会生成一对密钥,并存放在你指定的文件夹下

     

    c、id_rsa是私钥,id_rsa.pub是相对应的公钥

    b、使用ssh-copy-id指令同步ssh key到远程服务器,同步的是公钥

    ssh-copy-id -i ~/.ssh/id_rsa.pub root@服务器IP地址

    然后要输入一次服务器密码,之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器(此处是root用户目录)~/.ssh/authorized_keys文件里。

    当然你也可以手动复制本地~/.ssh/id_rsa.pub(注意是pub结尾的公钥)文件内容追加到服务器~/.ssh/authorized_keys的后面(从命名可以看出该文件可以存储多个ssh key)

    注意: 这里全程使用的是root用户,所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户,或许会存在同步文件失败的问题,此时需要远程服务器修改文件夹的读写权限(命令 chmod)。

    三、路由为history时的布署

    我们知道vue中路由有两种模式,hash和history,默认是hash。

    hash就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。
    正常情况下,当浏览器地址栏地址改变,浏览器会重新加载页面,而如果是hash部分修改的话,则不会重新加载,这就是前端路由的原理,即允许根据不同的路由页面局部更新而不刷新整个页面。H5新增了history的pushState接口,也允许前端操作改变路由地址但是不触发页面刷新,history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

     上图为实际项目中的history模式配置。比hash模式多了句代码。

    此项目布署在nginx的根目录下,如果布署到非域名根目录,还需要正确配置项目中的publicPath值,此情况下,非域名根路径部署应该将publicPath配置为完整的前缀路径。publicPath必须使用绝对路径/xxx的配置形式,而不能用相对路径./。比如布署在根目录下的test文件夹,publicPath为`/test`,而非`./`。

    更多相关内容
  • Vue项目打包部署总结

    万次阅读 多人点赞 2020-12-13 16:39:40
    关注公众号前端开发博客,回复“加群”加入我们一起学习,天天进步作者:沐码链接:https://wintc.top/article/29使用Vue做前后端分离项目时,通常前端是单独部署,...

    关注公众号 前端开发博客,回复“加群”

    加入我们一起学习,天天进步

    作者:沐码

    链接:https://wintc.top/article/29

    使用Vue做前后端分离项目时,通常前端是单独部署,用户访问的也是前端项目地址,因此前端开发人员很有必要熟悉一下项目部署的流程与各类问题的解决办法了。Vue项目打包部署本身不复杂,不过一些前端同学可能对服务器接触不多,部署过程中还是会遇到这样那样的问题。本文介绍一下使用nginx服务器代理前端项目的方法以及项目部署的相关问题,内容概览:

    Vue项目打包发布问题汇总

    一、准备工作——服务器和nginx使用

    1. 准备一台服务器

    我的是ubuntu系统,linux系统的操作都差不多。没有服务器怎么破?

    如果你只是想体验一下,可以尝试各大厂的云服务器免费试用套餐,比如华为云免费试用,本文相关操作即是在华为云上完成的。不过如果想时常练练手,我觉得可以购买一台云服务器,比如上面的华为云或者阿里云都还挺可靠。我的个人网站就是部署在阿里云,你可以点击我的推广链接进行购买,近期有活动首次购买不到100块/年。

    2. nginx安装和启动

    轻装简行,这部分不作过多赘述(毕竟网上相关教程一大堆),正常情况下仅需下面两个指令:

    # 安装,安装完成后使用nginx -v检查,如果输出nginx的版本信息表明安装成功
    sudo apt-get install nginx
    # 启动
    sudo service nginx start
    

    启动后,正常情况下,直接访问 http://服务器ip 或 http://域名 (本文测试用的服务器没有配置域名,所以用ip,就本文而言,域名和ip没有太大区别)应该就能看到nginx服务器的默认页面了——如果访问不到,有可能是你的云服务器默认的http服务端口(80端口)没有对外开放,在服务器安全组配置一下即可。

    Vue项目打包发布问题汇总

    3. 了解nginx: 修改nginx配置,让nginx服务器代理我们创建的文件

    查看nginx的配置,linux系统下的配置文件通常会存放在/etc目录下,nginx的配置文件就在/etc/nginx文件夹,打开文件/etc/nginx/sites-available/default(nginx可以有多个配置文件,通常我们配置nginx也是修改这个文件):

    Vue项目打包发布问题汇总

    可以看到默认情况下,nginx代理的根目录是/var/www/html,输入 http://服务器ip会访问这个文件夹下的文件,会根据index的配置值来找默认访问的文件,比如index.html、index.htm之类。

    我们可以更改root的值来修改nginx服务代理的文件夹:

    1. 创建文件夹/www,并创建index.html,写入"Hello world"字符串

      mkdir /www
      echo 'Hello world' > /www/index.html
      
    2. 修改root值为 /www

    3. sudo nginx -t 检查nginx配置是否正确

    4. 加载nginx配置:sudo nginx -s reload

    再次访问页面,发现页面内容已经变成了我们创建的index.html:

    Vue项目打包发布问题汇总

    二、Vue项目打包同步文件到远程服务器

    1. 打包

    默认情况下,使用vue-cli创建的项目,package.json里的script应该已经配置了build指令,直接执行yarn build 或者 npm run build即可。

    2. 同步到远程服务器

    我们使用nginx部署Vue项目,实质上就是将Vue项目打包后的内容同步到nginx指向的文件夹。之前的步骤已经介绍了怎样配置nginx指向我们创建的文件夹,剩下的问题就是怎么把打包好的文件同步到服务器上指定的文件夹里,比如同步到之前步骤中创建的/www。同步文件可以在git-bash或者powershell使用scp指令,如果是linux环境开发,还可以使用rsync指令:

    scp -r dist/* root@117.78.4.26:/www
    或
    rsync -avr --delete-after dist/* root@117.78.4.26:/www 
    

    注意这里以及后续步骤是root使用用户远程同步,应该根据你的具体情况替换root和ip(ip换为你自己的服务器IP)。

    为了方便,可以在package.json脚本中加一个push命令,以使用yarn为例(如果你使用npm,则push命令中yarn改成npm  run即可):

     "scripts": {
        "build": "vue-cli-service build",
        "push": "yarn build && scp -r dist/* root@117.78.4.26:/www"
      },
    

    这样就可以直接执行yarn push 或者npm run push直接发布了。不过还有一个小问题,就是命令执行的时候要求输入远程服务器的root密码(这里使用root来连接远程的,你可以用别的用户,毕竟root用户权限太高了)。

    为了避免每次执行都要输入root密码,我们可以将本机的ssh同步到远程服务器的authorized_keys文件中。

    3. 同步ssh key

    1. 生成ssh key:使用git bash或者powershell执行ssh-keygen可以生成ssh key。会询问生成的key存放地址,直接回车就行,如果已经存在,则会询问是否覆盖:

    2. 同步ssh key到远程服务器,使用ssh-copy-id指令同步

      ssh-copy-id -i ~/.ssh/id_rsa.pub root@117.78.4.26
      

    输入密码后,之后再次同步就不需要输入密码了。其实ssh_key是同步到了服务器(此处是root用户家目录)~/.ssh/authorized_keys文件里:

    当然你也可以手动复制本地~/.ssh/id_rsa.pub(注意是pub结尾的公钥)文件内容追加到服务器~/.ssh/authorized_keys的后面(从命名可以看出该文件可以存储多个ssh key)

    注意:这里全程使用的是root用户,所以没有文件操作权限问题。如果你的文件夹创建用户不是远程登录用户,或许会存在同步文件失败的问题,此时需要远程服务器修改文件夹的读写权限(命令 chmod)。

    创建了一个测试项目(点击本链接可以在gihub查看)[1]试一下,打包、文件上传一句指令搞定啦:

    Vue项目打包发布问题汇总

    访问一下,果然看到了我们熟悉的界面:

    Vue项目打包发布问题汇总

    至此,常规情况下发布Vue项目就介绍完了,接下来介绍非域名根路径下发布以及history路由模式发布方法。

    三、非域名根路径发布

    有时候同一台服务器同一端口下可能会根据目录划分出多个不同的项目,比如我们希望项目部署到http://a.com/test下,这样访问http://a.com/test访问到的是项目的首页,而非test前缀的地址会访问到其它项目。此时需要修改nginx配置以及Vue打包配置。

    1. nginx配置

    只需要添加一条location规则,分配访问路径和指定访问文件夹。我们可以把/test指向之前创建的/www文件夹,这里因为文件夹名称和访问路径不一致,需要用到alias这个配置:

    Vue项目打包发布问题汇总

    如果文件夹名称与访问路径一致都为test,那这里可以用root来配置:

    Vue项目打包发布问题汇总

    这里要将/test配置放到/之前,意味着在路由进入的时候,会优先匹配/test。如果根路径/下的项目有子路由/test,那http://xxxx/test只会访问到/www里的项目,而不会访问该子路由。

    2. 项目配置

    为了解决打包后资源路径不对的问题,需要在vue.config.js中配置publicPath,这里有两种配置方式,分别将publicPath配置为./和/test:

    Vue项目打包发布问题汇总

    更新nginx配置,发布后即可正常访问啦。这里的两种配置方式是有区别的,接下来会看一下它们的区别。如果不进行项目配置,直接发布访问会出现JS、CSS等资源找不到导致页面空白的问题:

    Vue项目打包发布问题汇总

    该问题原因是资源引用路径不对,页面审查元素可以看到,页面引用的js都是从根路径下引用的:

    Vue项目打包发布问题汇总

    查看打包后的文件结构,可以看到js/css/img/static等资源文件是与index.html处于同级别的:

    Vue项目打包发布问题汇总

    对于两种配置方式,看看都是怎么生效的:

    1. publicPath配置为./, 打包后资源引用路径为相对路径:

    2. publicPath配置为/test,打包后资源相对路径为从域名根目录开始的绝对路径:

    两种配置都可以正确地找到JS、CSS等资源。不过还有个问题,那就是static中的静态资源依旧会找不到。

    3. 绝对路径引用的静态资源找不到的问题

    因为在打包过程中,public下的静态资源都不会被webpack处理,我们需要通过绝对路径来引用它们。当项目部署到非域名根路径上时,这点非常头疼,你需要在每个引用的URL前面加上process.env.BASE_URL(该值即对应上文配置的publicPath),以使得资源能被正常访问到。我们可以在main.js把这个变量值绑定到Vue.prototype,这样每个Vue组件都可以使用它:

    Vue.prototype.$pb = process.env.BASE_URL
    

    在模板中使用:

    <img :src="`${$pb}static/logo.png`">
    

    然而,更加头疼并且没有良好解决方案的问题是在组件style部分使用public文件夹下的静态资源:

    • 如果需要使用图片等作为背景图片等,尽量使用内联方式使用吧,像在模板中使用一样。

    • 如果需要引入样式文件,则在index.html中使用插值方式引入吧。

    关于静态资源的问题,vue-cli的推荐是尽量**将资源作为你的模块依赖图的一部分导入(即放到assets中,使用相对路径引用),**避免该问题的同时也带来其它好处:

    四、history模式部署

    默认情况下,Vue项目使用的是hash路由模式,就是URL中会包含一个#号的这种形式。#号以及之后的内容是路由地址的hash部分。正常情况下,当浏览器地址栏地址改变,浏览器会重新加载页面,而如果是hash部分修改的话,则不会,这就是前端路由的原理,允许根据不同的路由页面局部更新而不刷新整个页面。H5新增了history的pushState接口,也允许前端操作改变路由地址但是不触发页面刷新,history模式即利用这一接口来实现。因此使用history模式可以去掉路由中的#号。

    1. 项目配置

    在vue-router路由选项中配置mode选项和base选项,mode配置为'history';如果部署到非域名根目录,还需要配置base选项为前文配置的publicPath值(注意:此情况下,publicPath必须使用绝对路径/test的配置形式,而不能用相对路径./)

    Vue项目打包发布问题汇总

    2. nginx配置

    对于history模式,假设项目部署到域名下的/test目录,访问http://xxx/test/about的时候,服务器会去找/test指向的目录下的about子目录或文件,很显然因为是单页面应用,并不会存在a这个目录或者文件,就会导致404错误:

    Vue项目部署后页面找不到

    我们要配置nginx让这种情况下,服务器能够返回单页应用的index.html,然后剩下的路由解析的事情就交给前端来完成即可。

    history模式nginx配置

    这句配置的意思就是,拿到一个地址,先根据地址尝试找对应文件,找不到再试探地址对应的文件夹,再找不到就返回/test/index.html。再次打开刚才的about地址,刷新页面也不会404啦:

    Vue项目打包发布问题汇总

    3. history模式部署到非域名根路径下

    非域名根目录下部署,首先肯定要配置publicPath。需要注意的点前面其实已经提过了,就是这种情况下不能使用相对路径./或者空串配置publicPath。为什么呢?原因是它会导致router-link等的表现错乱,使用测试项目[2]分别使用两种配置打包发布,审查元素就能看出区别。在页面上有两个router-link,Home和About:

    Vue项目打包发布问题汇总

    两种配置打包后的结果如下。

    1. publicPath配置为./或者空串:

    2. publicPath配置为/test:

    publicPath配置为相对路径的router-link打包后地址变成了相对根域名下地址,很明显是错误的,所以非域名根路径部署应该将publicPath配置为完整的前缀路径。

    五、结语

    关于Vue项目发布的相关问题就先总结这么多,几乎在每一步都踩过坑才有所体会,有问题欢迎各位同学一起探讨。写博客很累,不过收获也很多,还是要坚持;有时候别人转载自己的原创文章也不标明出处,竟然将写文章日期改得比原创还早,有点心累。本文中使用到的图片都加了个自己的水印,是前端实现的,原理也很简单,之后写一篇简短的文章分享一下。

    参考资料

    [1]

    Vue项目打包发布: https://github.com/Lushenggang/vue-publish-test

    [2]

    Vue项目打包部署测试项目地址: https://github.com/Lushenggang/vue-publish-test

    相关文章

    1. 基于Vue的前端架构,我做了这15点

    2. Vue3的学习记录

    3. 一份很棒的Vue3 学习清单

    最后

    转发文章并关注公众号:前端开发博客,回复 1024,领取前端进阶资料

    1. 回复「电子书」领取27本精选电子书

    2. 回复「加群」加入前端大神交流群,一起学习进步

    3. 回复「Vue」获取 Vue 精选文章

    点赞和在看就是最大的支持❤️

    展开全文
  • VUE项目开发的完整流程

    千次阅读 2022-03-11 11:05:54
    文章目录一、VUE环境搭建二、创建VUE项目1. 外部终端创建2. IDea内部终端创建3. 项目介绍4. vue 的特别之处三、添加前端开发插件依赖四、前端开发流程1. 创建组件与编码2. 配置组件路由3. 运行五、前后端交互 提示...


    提示:本文是VUE项目开发的流程梳理,是对本专栏博客的梳理

    一、VUE环境搭建

    1. 搭建VUE环境,可参考vue环境搭建
    2. 下载使用yarn,可参考yarn的安装和使用

    二、创建VUE项目

    这里只介绍其中我所熟知的两种方式

    1. 外部终端创建

    1. 在存储vue项目的目录,清除路径并输入cmd,回车,进入当前目录的命令行终端
      在这里插入图片描述
    2. 创建vue项目
      注意名称不可用大写英文
      vue create demo_01
      
      在这里插入图片描述
    3. 根据自己需要选择模式,这里我选择自定义模式
      在这里插入图片描述
    4. 创建好的项目在IDea中打开即可

    2. IDea内部终端创建

    1. 在IDea打开Termial,输入如下代码

      vue create demo_01
      

      在这里插入图片描述

    2. 选择模式,然后创建,创建完毕后,即可在左侧目录找到项目
      在这里插入图片描述

    3. 项目介绍

    我们编程的内容主要在src文件夹中,目录介绍:

    1. assets:用于存储页面显示的图片资源
    2. components:views中的公共部分存储在此
    3. router:存储路由信息,用于页面跳转
    4. views:存储页面组件,是编程的重心
    5. App.vue:个人理解就是普通首页,可以随意更改
    6. main.js:整个vue项目的公共配置

    4. vue 的特别之处

    原始网页是Header+Body作为一个整体的开发,vue是将Header、Body作为单独组件分开开发,与封装的思路是一样的,所以现在不称为页面,称为组件。以前的衣服是一套一套地设计,外套、衬衫、裤子、鞋一起设计,成套的设计。vue是将外套、衬衫、裤子、鞋分开设计,然后再自由组合成一套衣服。

    三、添加前端开发插件依赖

    1. 打开vue项目,进入外部/内部终端,下载element
      在这里插入图片描述

    2. 下载完成后即可在package.json中查看
      在这里插入图片描述

    3. 修改公共配置文件main.js

      import {createApp} from 'vue'
      import App from './App.vue'
      import router from './router'
      // 引入依赖
      import ElementPlus from 'element-plus'
      import 'element-plus/dist/index.css'
      	
      
      var app=createApp(App)
      	
      // 使用ElementPlus
      app.use(ElementPlus)
      	
      
      app.use(router).mount('#app')
      

    四、前端开发流程

    1. 创建组件与编码

    1. 在views目录下创建组件
      可创建文件夹进行分类管理
      在这里插入图片描述

    2. 对组件进行编码

      标签作用
      template可理解为Body部分,但template只能放置一个控件,如果需要放置多个控件,可以嵌套放在div控件中
      scriptJS脚本的部分
      tyle编写样式部分
    <!--写页面内容的部分,与Body类似-->
    <template>
        <div id="container">
            <h5>我的第一个组件</h5>
            <button>点击我看看</button>
        </div>
    </template>
    
    <!--JS脚本-->
    <script>
        export default {
            // 组件命名,必须存在
            name: "UserReg"
        }
    </script>
    
    <!--编写样式的-->
    <style scoped>
    
    </style>
    

    2. 配置组件路由

    在这里插入图片描述

    1. 引入组件

      //先引入编写好的组件
      import HomeView from '../views/HomeView.vue'
      import UserReg from "@/views/users/UserReg";
      import Hello from "@/views/Hello/Hello";
      import Main from "@/views/main/Main";
      
    2. 配置路由

      //  配置路径、名称、组件
      const routes = [
        {
          path: '/',
          name: 'home',
          component: HomeView
        },
        {
          path: '/about',
          name: 'about',
          // route level code-splitting
          // this generates a separate chunk (about.[hash].js) for this route
          // which is lazy-loaded when the route is visited.
          component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
        },
        {
          path:'/userReg',
          name:'/UserReg',
          component:UserReg
        },
        {
          path:'/hello',
          name:'/Hello',
          component:Hello
        },
        {
          path:'/main',
          name:'/Main',
          component:Main
        }
      ]
      

    完整代码

    import { createRouter, createWebHistory } from 'vue-router'
    //先引入编写好的组件
    import HomeView from '../views/HomeView.vue'
    import UserReg from "@/views/users/UserReg";
    import Hello from "@/views/Hello/Hello";
    import Main from "@/views/main/Main";
    
    
    //  配置路径、名称、组件
    const routes = [
      {
        path: '/',
        name: 'home',
        component: HomeView
      },
      {
        path: '/about',
        name: 'about',
        // route level code-splitting
        // this generates a separate chunk (about.[hash].js) for this route
        // which is lazy-loaded when the route is visited.
        component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
      },
      {
        path:'/userReg',
        name:'/UserReg',
        component:UserReg
      },
      {
        path:'/hello',
        name:'/Hello',
        component:Hello
      },
      {
        path:'/main',
        name:'/Main',
        component:Main
      }
    ]
    
    const router = createRouter({
      history: createWebHistory(process.env.BASE_URL),
      routes
    })
    
    export default router
    
    

    3. 运行

    Termial上运行vue,点击链接即可
    在这里插入图片描述
    注意,vue支持热部署,在vue启动期间,如果文件发生改变,vue无需重新启动,刷新页面即可

    五、前后端交互

    这里参考我的另一个博客,不再赘述VUE前后端分离之数据交互(简单项目作为演示)

    展开全文
  • IDEA中创建启动Vue项目--搭建vue项目

    千次阅读 2021-09-10 15:41:39
    安装了nodejs和Vue之后,就可以使用idea创建和启动Vue项目


    环境配置

    下载安装nodeJs
    成功安装国内镜像或者是淘宝的npm镜像
    详情见博客:NodeJs的安装和配置

    安装Vue-cli构建工具

    //老版本
    cnpm install -g vue-cli
    
    //新版本
    npm install -g @vue/cli
    
    //安装新版需先卸载旧版本
    npm uninstall vue-cli -g
    

    构建项目

    首先进入目录地址

    在这里插入图片描述

    使用命令构建项目,初始化一个项目

    //旧版本,项目名称为“permission-ui”
    vue init webpack permission-ui
    //项目名称是 permission-ui,其中webpack是构建工具
    
    //新版本
    vue create vuetest
    
    

    初始化的时候会让你选择预设,是直接选择版本还是自己设定

    1、选择自己设定需要询问一些问题,根据具体需要来回答就好了。类似以下这种问题。
    在这里插入图片描述

    2、直接选择2或者3版本的,选择2版本会直接自动安装
    在这里插入图片描述

    安装成功之后可以在安装路径里面找到安装好的项目
    在这里插入图片描述

    使用命令启动Vue项目

    进入安装路径

    I:\Vue>cd vuetest
    

    在项目目录下使用命令安装项目所需要的依赖

    cnpm install
    

    使用命令启动项目

    npm run serve
    

    见下图:

    在这里插入图片描述

    根据图中的网络路径就可以打开项目了
    在这里插入图片描述

    终止操作:Ctrl+C
    在这里插入图片描述

    使用idea启动Vue项目

    前提条件:
    1、idea安装好node.js环境和初始化依赖
    2、安装好vue.js插件(file-settings-plugins)
    在这里插入图片描述

    打开idea后进行配置
    在这里插入图片描述

    配置后重启idea
    启动idea
    然后通过路径访问项目
    在这里插入图片描述

    展开全文
  • vue项目启动

    千次阅读 2022-01-24 16:44:45
    为保险起见,用管理员启动方式,启动cmd, 切换目录到项目根文件夹 输入命令 npm install npm run dev/serve
  • Vue项目上线部署

    千次阅读 多人点赞 2022-03-02 20:01:58
    第一步:将vue项目打包生成dist文件夹:npm run build 第二步 第二步:打包出来的项目必须放在服务器上部署一遍才可打开 第三步 第三步:使用nodejs搭建本地微型服务器,将项目部署 新建一个空文件夹demo, ...
  • Nginx 部署vue项目

    千次阅读 2022-04-21 15:30:18
    文章目录nginx 部署vue项目1.下载nginx2.把下载好的文件上传至Liunx目录3.安装nginx服务器3.安装之后4.上传Vue项目5.启动项目测试 nginx 部署vue项目 1.下载nginx nginx下载地址 选择此版本的nginx,如下图所示: 2...
  • vue项目配置路由

    千次阅读 2022-01-21 10:02:03
    vue项目配置路由 1.手动配置 (1)在main.js中添加 import router from './router' new Vue({ el: '#app', //在app.vue中引入 router, components: { App }, template: '<App/>' }) (2)在src路径下...
  • 如何运行vue项目

    千次阅读 多人点赞 2022-03-29 18:45:56
    运行别人的vue项目
  • SpringBoot+vue项目实战(一)

    千次阅读 多人点赞 2021-02-19 17:13:30
    SpringBoot+vue入门SpringBoot+Vue项目实战一:vue开发步骤一:安装node.js步骤二:安装镜像步骤三:安装Vue步骤四:安装全局vue-cli脚手架步骤五:检查Vue是否安装成功步骤六:创建一个基于 webpack 模板的新项目...
  • VSCode创建Vue项目完整教程

    千次阅读 多人点赞 2022-04-18 14:06:08
    安装配置脚手架vue-cli二、创建vue项目1.命令方式创建2.重新初始化依赖3.启动项目总结 一、配置环境 1.安装VS Code 官网下载 https://code.visualstudio.com/ 下载VS Code,按照步骤安装。 2.安装node.js (1)官网 ...
  • Vue项目如何打包并且发布

    千次阅读 2022-04-22 14:40:29
    如何将Vue项目打包并发布?我这边是测试发布到本地,不过步骤是一样的,步骤如下: 1、安装部署Nginx服务器。(类似Tomcat服务器) 说明:Nginx (engine x) 是一个高性能的HTTP和反向代理服务器,也是一个IMAP/...
  • Idea创建vue项目

    千次阅读 2022-04-01 10:10:10
    一、首先去官网下载node.js,并安装 node.js下载地址:Download | Node.js 我在之前就安装过,选择的是Windows64 16.14.1...在cmd中输入命令:npm install -g @vue/cli@4.5.15(我这里安装的是这个版本,可以自行选.
  • Vue项目案例

    万次阅读 多人点赞 2020-12-30 15:14:39
    import Vue from 'vue' import VueRouter from 'vue-router' import Home from '../views/Home.vue' import First from '../views/first.vue' Vue.use(VueRouter) const routes = [ { path: '/', component: ...
  • 几种创建vue项目的方法

    千次阅读 2021-07-27 21:35:55
    如果你还没有安装 VueCLI 请执行下面的命令进行...在命令中输入以下命令创建Vue项目: 输入 vue init webpack demo727 Project name (demo727) 项目名字 (确定则回车) Project description (A Vue.js project) 项...
  • 使用idea启动vue项目

    千次阅读 2022-04-11 18:25:39
    刚来公司实习发现公司的前端使用的是vue,之前根本就没有听说过。然后一上来就需要看代码,but but 就是没有文档什么的东西, 就需要自己去研读,我就想去运行其中的前端和后端联调起来方便理解,结果在配置和运行...
  • 打包vue项目的方法

    千次阅读 2022-02-08 18:03:32
    部署时,前端vue项目的打包方法
  • vue-cli创建vue项目详细步骤

    千次阅读 2022-04-15 22:52:43
    四、创建vue项目,输入命令( vue create 项目名称) 五、进入详细选择 (上下 方向键选择,空格键确定,enter进入下一步) 1、默认vue2版本和默认vue3版本都是有Eslint和Babel的,Eslint是代码规范的,Babel是将...
  • 用webstrom运行VUE项目

    千次阅读 2022-03-17 09:45:23
    webstrom安装破解,安装node,运行VUE项目
  • nginx 部署vue项目

    千次阅读 2022-03-05 17:06:58
    nginx部署vue项目,详细适合新手
  • Terminal怎么停止VUE项目

    万次阅读 2020-12-20 13:00:10
    开启vue项目不关闭的后果问题描述:新手使用idea或webstorm工具开发vue,使用Terminal命令行npm run dev 运行项目,无法输入命令关闭比项目解决方案:打开Terminal窗口按键盘【Ctrl】+【C】,提示是否关闭,键盘输入...
  • 使用IDEA创建Vue项目

    千次阅读 2022-01-01 10:59:32
    使用IDEA创建Vue项目 1.File==>New==>Project 2.点击Static Web,选择右边的Vue.js,点击下一步 3.修改项目名称,其它的默认值可以不修改 4.后续许多页面的默认值可以不修改,一直点击下一步 5.创建完成...
  • Nginx部署vue项目

    千次阅读 2022-01-24 16:37:00
    步骤一:项目打包 打开vscode终端 在终端输入 npm run build 这时可以看到生成dist文件夹,我们要放在服务器上的文件就在这, 步骤二:配置nginx 找到在官网下载的安装包。
  • 创建一个Vue项目(完整步骤)

    万次阅读 2021-11-17 16:03:21
    二、搭建Vue环境 1、为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/ 输入:npm install -g cnpm –registry=https://registry.npm.taobao.org 即可安装npm镜像,以后再用到npm的地方直接用cnpm来...
  • nginx 部署多个vue项目

    千次阅读 2022-03-13 23:27:48
    这里写目录标题vue项目配置.env.staging文件.env.production文件vuefig.js文件router->index.js文件nginx配置 ngxin下载后解压即可 1.vue项目配置(基于若依框架的前端项目) vue项目配置 .env.staging文件 # ...
  • 如何打开一个现有的VUE项目

    千次阅读 2022-03-27 20:29:09
    如何打开一个现有的VUE项目。最近为了研究,下载了一个VUE项目,但是一直打不开。经过研究(一番折腾),现把经验记录一下。
  • 条件:1、node环境安装 2、npm已安装 3、开发工具使用vscode 4、vscode导入项目(打开vscode,尽量以管理员身份运行,直接选择打开文件夹,选择到项目目录) 安装 打开vscode 的终端ctrl+shift+Y 或者选择菜单栏的...
  • 创建vue项目常用命令

    千次阅读 2021-05-27 19:58:06
    创建vue项目常用命令 如果vue项目出错了你可以把 那个黄色删了在重新安装就可以了 清理缓存 npm cache clean --force 第一步,创建淘宝镜像,安装npm镜像 npm install -g @vue/cli --registry=...
  • Vue脚手架 Vue脚手架指的是vue-cli,它是一个快速构建**单页面应用程序(SPA)**环境配置的工具,cli是(command-line-interface )命令行界面。 补充:单页面应用程序 单页面应用程序简称SPA,指一个Web网站中只有...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 456,870
精华内容 182,748
关键字:

vue项目