• 使用vs Code从0开始搭建一个vue项目(手把手教会你,包会)


    https://www.pianshen.com/article/9060928060/
    图片显示不出来,从官网查看

    一、准备工作:
      //提前安装node.js
      下载地址https://nodejs.org/zh-cn/,然后一步一步傻瓜式安装即可;
      在console控制台使用node -v,  npm -v, 如果正常显示版本, 就是安装成功。


      
      //全局安装vue-cli, 已经安装了, 就跳过这一步;
      npm install -g vue-cli


      
      //解决npm安装慢的问题
      npm install –registry=https://registry.npm.taobao.org
      (使用npm config list 可以查看安装是否成功)
      

    二、准备完毕, 现在进入正题:

    以下操作, 都是在vs code的Terminal里面执行的。
    1.在本地磁盘创建一个自己的项目, 我的项目叫做vue-demo
     进入你打算存放代码的文件目录(我存放在E:front-workspacevue):

    然后执行命令:

    vue init webpack vue-demo

    然后回车

    生成项目名为vue-demo的模板, 然后回车(不支持包含大写的项目名称)。


    2.在安装时会询问下面的事项, 根据需要选择Y/n:

    先放个图, 镇楼, 下面详细阐述:


     

    1)Project name (vue-demo);项目名称(vue-demo)。(直接回车)
     2)Project description  (A Vue.js project);项目描述(一个vue.js项目)。(直接回车)
     3)Author ;作者。(这里我要装逼一哈, 署名Ferdinand, 毕竟这个代表是Ferdinand写的, 然后回车)
     4)Runtime + Compiler: recommended for most users
      Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific HTML) are ONLY allowed in .vue files - render functions are required elsewhere
      直接回车

     5)Install vue-router? (Y/n);安装的路由?(Y/ n)。(可安可不安,以后也可以再安,根据需求选择)
      比如我就选择n, 回车
     6)Use ESLint to lint your code? (Y/n);使用ESlint语法?(Y/  n)。(使用ESLint语法,就要做好心理准备,除非你非常懂ESLint语法,要不就会处处报错,我就被逼疯过,建议n)
     7)Setup unit tests with Karma + Mocha? (Y/n);设置单元测试?(Y / N)。(选N)
     8)Setup e2e tests with Nightwatch? (Y/n);Nightwatch建立端到端的测试?(Y / N)。(选N)
     9)Should we run `npm install` for you after the project has been created? (recommended)  
     一般选择npm这一个

    操作完成, 会看到这样的界面:

    3.cd vue-demo
    进入刚才创建的项目

    4.npm install
    初始化安装依赖

    5.npm run dev
    执行完成之后, 在浏览器打开http://localhost:8080,则可以看到欢迎页了。代表vue项目创建成功。

    6.其他
    如何在我们自己的服务器上访问呢?
    此时需要执行(前面有个点):
    · npm run build
    这样会生成静态文件,在根目录的dist里,里面有个index.html,这是服务器访问的路径指定到这里就可以访问我们自己的项目了。
     

  • 相关阅读:
    技巧和诀窍;在VS 2005里优化ASP.NET 2.0Web项目的Build性能(转)
    去噪:用于验证码图片识别的类续(C#代码)
    快速申请QQ号码的技巧(图文介绍)
    vs2005中调试js
    "Take the Internet Back“挂机程序(读信息挣美元)
    javascript的编写、调试
    硬盘速度和Visual Studio性能
    Java Swing的DragAndDrop机制
    Rails 的 SNS 准备
    学习,编译ffmpeg tutorial
  • 原文地址:https://www.cnblogs.com/sunny3158/p/14438357.html
Copyright © 2020-2023  润新知