zoukankan      html  css  js  c++  java
  • 详细教你:如何搭建vue环境和创建一个新的vue项目

    首先下载node.js/下载地址:  http://nodejs.cn/download/

    选择next:

    第一次安装选择change:

     

     注: repair是修复之前有问题的node.js/remove移除电脑上的node.js  

    接下来还是选择next一直按照提示选择就行(中间有个选对勾的,不要打对勾),最后安装成功

    第二步打开终端 Win+R键 

    ctrl和alt之间的这个就是win键

    然后输入cmd

     点击确定弹出电脑终端如图:

    然后在终端输入

    node -v

    查看node是否安装成功,成功会显示安装版本

     我的是刚装的最新版本v12.13.0,

     接下来就开始安装vue脚手架,在终端输入然后回车等他自动安装成功

    npm install --global vue-cli

    安装过程有点儿慢,耐心等待(注意:global 是全局安装vue-cil)

     终端输入:

    vue -V

    查看脚手架版本

     出现版本号,自此脚手架安装完成,

    第三步,全局安装webpack

    接下来安装webpack在终端输入:

    npm install --global webpack

    (注意:只要是global就是全局安装)

    安装结束输入

    webpack -V

    检查是否安装成功

    最后创建vue项目

    在终端输入:

    vue init webpack my-project

    my-project是创建的项目名称

     提示依次是①项目名称

          ②项目描述

          ③作者(可输入自己的名字,也可以空着)

          ④vue的构建,一般就选择第一个按回车即可

          ⑤安装vue-router

          ⑥是否使用ESLint来lint你的代码(规范代码用的,注意了这一条新手一定要选择no,输入n再回车即可)

          ⑦设置单元测试

          ⑧选择一个测试运行程序

            jest:(Jest是由Facebook发布的开源的、基于Jasmine的JavaScript单元测试框架)

            karma and mocha:(将项目运行在各种浏览器 和 定义测试模块)

            none (configure it yourself):(自定义你的项目)

          ⑨设置e2e测试

          ⑩创建项目后是否要使用npm install

            Yes, use NPM:使用npm

            Yes, use Yarn:使用yarn

            No, I will handle that myself:(自己自定义)

     一路回车就行,(注意第六条,视你的个人情况定,新手最好选n),开始创建项目

     创建成功后提示有两个

    首先按照路径找到你的项目文件夹

     

     找到之后在终端输入cd空格拖动文件夹拖到终端,

     

     也可以按照路径自己输入,敲回车,就会进入指定文件夹

     然后输入

    npm run start

    回车,

     一般都是   http://localhost:8080 ,如果端口号占用就会自动使用没有占用的端口号,是你们的而定

    最后输入,回车

     如图:一个新的vue项目搭建好了

  • 相关阅读:
    php CI框架基础知识
    1206 多表单提交,强类型
    1205 Mvc的Razor语法
    1204 Mvc
    1117 邮件验证
    1115 模板页
    1113 Ajax
    1110 Jquary动画
    1108 Jquary
    1107 Linq高级查询
  • 原文地址:https://www.cnblogs.com/wulicute-TS/p/11870721.html
Copyright © 2011-2022 走看看