zoukankan      html  css  js  c++  java
  • 从零开始搭建vue开发环境及构建vue项目

    1.安装node.js
    安装完成之后,打开dos(windows+R或者直接windows键打开,输入cmd,按回车键)窗口,输入命令node -v可以查看安装的
    node.js版本
    node.js自带npm(包管理)安装完成之后,npm本地仓库默认在 C:UsersAdministratorAppDataRoaming 目录下。注:有
    的电脑会自己隐藏文件夹,可以复制上面的目录地址在自己电脑上直接进入。看到如下图的两个文件夹:npm和npm-cache
    接下来就是将上面的npm和npm-cache移动到node.js的安装目录下
    2.改变npm本地仓库地址
    先找到自己的node.js安装目录,不记得安装目录的,可以在dos窗口输入where node查看
    现在在node.js目录下手动新建两个名字为node_cache和node_global空文件夹,注意是空的文件夹
    输入命令移动文件夹:cmd中执行npm config set prefix "D:Program Files odejs ode_global"回车,然后继续执行命
    令npm config set cache "D:Program Files odejs ode_cache"。命令里面的目录写自己刚在nodejs安装目录下创建的
    node_cache和node_global目录

    3.配置淘宝镜像站
    4.安装VUE
    在cmd窗口输入全局安装vue命令npm install vue -g进行安装,正常第一次安装应该是执行命令后出现added 1 package,安
    装完成之后可以在node.js/node_global/node_modules下面找到vue目录,dist(distribution)是最终发布的产品,最后vue项目打
    包发布会生成一个这样的dist文件给我们来发布,这个后面写部署的时候补上说明。
    安装vue-router,这个差不多是使用vue开发很常用的,所以一般使用全局安装。在cmd窗口输入命令npm install vue-
    router -g进行安装,安装完成之后同样可以在node.js/node_global/node_modules下面找到vue-router目录。跟上面vue目录同级
    安装脚手架:在cmd窗口输入命令npm install vue-cli -g并执行。
    5.构建一个新的VUE项目
    在cmd窗口到达项目目录后,继续执行命令vue init webpack vueDemo来新建项目(vueDemo为项目名称)
    继续按Enter键,项目开始构建,
    “Project name”:这个是项目名称,默认是输入时的那个名称,想改的话直接输入修改,也可以直接回车

    “Install vue-router”:是否需要vue-router,这里默认选择使用,这样生成好的项目就会有相关的路由配置文件

    “Use ESLint to lint your code”:是否使用ESLint,刚才说了我们这个项目需要使用所以也是直接回车,默认使用,这样会生成
    相关的ESLint配置

    “Setup unit tests with Karma + Moch?”: 是否安装单元测试。

    “Setup e2e tests with Nightwatch”:是否安装e2e测试,这里我也同样选择的是“N”

    这几个配置选择yes 或者 no 对于我们项目最大的影响就是,如果选择了yes 则生成的项目会自动有相关的配置,有一些loader我们
    就要配套下载。所以如果我们确定不用的话最好不要yes,要么下一步要下很多没有用的loader
    .初始化项目:在cmd窗口到达项目路径下这里的项目路径是上一步中的project Name下,就是要到你的项目下,去运行项目
    ,执行命令npm install
    运行项目:继续在上图的窗口中执行命令cnpm run dev
    运行完毕会出现项目的地址

    部分内容参考

    手把手教你用vue-cli搭建vue项目

  • 相关阅读:
    CF633C Spy Syndrome 2 trie树
    luogu 3998 [SHOI2013]发微博 map
    阿里云ECS新增端口
    阿里云运行docker容器报错
    no matches for kind "ReplicaSet" in version "extensions/v1beta1"
    k8s中flannel:镜像下载不了
    k8s删除节点后再重新添加进去(踩坑)
    如何在IntelliJ Idea中同时启动不同端口
    SpringBoot整合Elastic-job(详细)
    K8S容器探针
  • 原文地址:https://www.cnblogs.com/lesliecn/p/10505396.html
Copyright © 2011-2022 走看看