如何快速搭建一个VUE项目?

准备工作:(以下工作都在cmd命令提示符窗口完成

    1. 搭建vue项目 首先安装node 因为要使用npm命令

        怎样知道自己有没有 node.js 可以打开电脑的 cmd 命令提示符窗口,输入 node 就可以查看;

        这是我已经安装过了,如果没有的话可以通过此链接根据自己的电脑配置下载安装:

            node.js 下载地址

     2. 安装完之后我们就可以通过如下指令下载我们的 vue 脚手架了

npm install -g @vue/cli

         如果觉得下载的慢的话 我们可以安装一下淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org ,安装完成之后直接输入如下指令就可以完成安装

cnpm install -g @vue/cli  

 

安装完vue之后我们可以选择一个文件夹开始搭建你的项目(在项目文件夹中按住 shift + 鼠标右键,点击在此处打开powershell窗口

以下操作都是在powershell窗口 中进行操作

    1、vue create 项目名称 创建vue项目 项目名称不能使用中文

        出现两个选项:

        please pick a preset:(Use arrow keys) 请选择预设:(使用箭头键)

            1、 default(babel, eslint)默认搭建项目的配置

            2、 Manually select features 自定义搭建项目配置

            我们选择 2.使用自定义搭建项目配置,使用键盘的上下键可以控制选择哪一个 

            选中自定义后点击enter

 

    2、接下来出现很多配置选项 

        check the features needed for your project 配置项目所需要的功能:

        我们现在只选择 babel和router

            babel 是ES6转ES5的语言,为我们做兼容使用的;

            router 就是我们的路由;

            还是使用上下键选择 然后通过空格键切换是否选中 小括号中有星号表示选中

            选中之后点击enter

 

    3、这时会出现 User history mode for router?(Requires proper server setup for index fallback in production)

        这句话的意思是:是否使用路由器的用户历史模式?(需要为生产中的索引回退设置正确的服务器)

        这里如果公司项目没有说明要使用history则我们不使用history模式

        所以这里选择no 然后点击enter

 

    4、接下来出现

        In dedicated config files  在专用配置文件中

        In package. json  在json文件格式

        这两个选项选择哪个都行 

        直接点击enter

 

    5、这时出现 save this as a preset for future projects? 将此保存为将来项目的预设?

        这里选择y/n 都行 直接按回车就可以了

        等待片刻之后会出现

    

    6、 cd 文件夹名字    打开这个文件夹

           npm run serve    项目启动命令

      最后如果出现这个就表示项目搭建成功了


 

    7、最后我们在我们的项目文件夹中按住 shift + 鼠标右键,点击在此处打开powershell窗口

       输入npm run serve  项目启动命令就可以了

       等待片刻会出现:

         App running at: 应用程序运行位置:

        - Local:   http://localhost:8080/  本地地址 

        - Network: http://192.168.1.10:8080/ 网络地址

        我们直接在我们的浏览器中输入 其中任意一个打开 就表示运行成功了!

此处有视频哦 

如何快速的搭建一个vue项目

 

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

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

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值