Q2:利用Vue CLI 3.x如何构建项目?(针对windows)

具体安装请看官网。以下是简单的走个流程-----------------------------------------------------“code如此多骄,引无数coder竞折腰”

一.准备工作

    1.git下载并安装,官网链接:https://gitforwindows.org/;也就是我们用的git bash.(可以当cmd使用,也就git命令;也遵循Linux命令)

    2.下载并安装node环境,官网链接:http://nodejs.cn/download/下载推荐版本最好。安装步骤傻瓜式next,其中安装路径可以自行选择。

   3.检测node环境是否安装成功:使用node -v和npm -v命令分别检测。为什么要npm -v?因为node安装过程中就自动安装了npm,所以就不用安装了。为什么要安装npm?因为npm是node的包管理器,英文名 node package manager。

  4.安装cnpm(npm淘宝镜像)。有npm为啥安装cnpm?从国外服务器上下载没有从国内快呀。用法和npm一致。$ npm install ...那就是$ cnpm install ...。官网链接:http://npm.taobao.org/。这也类似于使用公司内网安装东西一样,也是下面这条命令,只不过后面的网址是公司内网而已。

$ npm install -g cnpm --registry=https://registry.npm.taobao.org

  5.检测cnpm是否安装成功。使用cnpm -v检测。

A1:如果出现“cnpm”不是内部或外部明亮,也不是可运行的程序或批处理文件。
Q1:那就设置系统环境变量path:C:\Users\管理员\AppData\Roaming\npm(这是默认的)。就是cnpm.cmd.所在的文件夹,类似于npm的环境变量,只不过安装装node时装上了npm 同时npm系统环境变量path也配置了(npm.cmd所在的文件夹路径)。然后尝试检测:cnpm -v 如果不成功,关掉命令行工具重试,重试还不行,关掉电脑重试就好了。

   6.在浏览器安装Vue Devtools。官网链接:https://cn.vuejs.org/v2/guide/ 安装它干什么用?vue专门的调试器,更方便。如何安装?在Google商城搜索安装插件或者官网上找到下载或放到浏览器扩展程序中。

针对第4点补充一点:

①CDN是什么?
    简单叫做CDN加速 https://www.huxiu.com/article/276456.html?rec=similar
②镜像和CDN有什么区别?
    *镜像简单说一个应用就是中国用户直接访问外国网站下载外国网站资源慢,可通过中国镜像访问下载,可提高速度。
    *CDN简单说一个应用就是上亿个客户同时访问一个网站看“都挺好”电视剧,不用担心由于同时访客多而阻塞,卡顿。使用CDN甚至可快速打开网站。
    *概念区别:
镜像服务器是源内容服务器的完整复制。而CDN,是部分内容的缓存,智能程度更高。CDN实现的方式是:由用户触发,CDN缓存服务器没有用户请求的,CDN节点被动回源内容服务器获取内容,缓存这份资源的同时返回该资源给用户,是一个被动拉取数据的过程。后续对该资源的访问,CDN返回缓存资源给用户端。
镜像站点是将数据全部都放在本地(也就是镜像站点),用户请求的时候,就直接push给用户,不需要再额外回源内容服务器取数据。

二、安装Vue Cli 3.x版本:官网链接:https://cli.vuejs.org/zh/

      1.全局安装Vue Cli 3.x

npm install -g @vue/cli  //慢
或
npm install -g @vue/cli  //快

       虽然安装成功了,但过程中出现platform unsupported……

      

        这也无所谓,也就是可以理解为可以忽略的错误。因为fsevents不兼容windows和Linux系统,兼容Mac OS。如果你不想出现这样的错误,那就用npm 安装,但就是慢一些。

     2.检测Vue Cli 3.x是否安装成功:通过 vue -V 或者按照官网vue --version检测。有人就想问,为什么不安装webpack打包工具呢?Vue Cli 3.x已经封装了webpack,实现了打包功能,所以不需要单度再安装webpack了。

     3.初始化项目

          方法一:命令行方法

vue create 项目名

         并进行一些选择,如何操作根据实际所需,提供一个链接参考:https://www.jb51.net/article/148100.htm

              

         设置完后回车,安装完成

                

        根据以上提示,切换目录,运行,浏览器输入local:url。如果加载失败,说明端口占用,关闭cmd,重新运行即可。类似于检测某个东西是否安装,通过版本号检测,检测不到,试着关闭cmd ,然后重新打开再输入即可。

                 

        如果要结束进程使用ctr+c.选在Y回车,即可结束。

补充:
   * 除了在cmd和git bash中操作。其实在IDE环境上可以操作。推荐vscode的终端。
   * 除此之外,在其上面还可以建分支(注意左下角标志)

 

         方法二:GUI方法        

vue ui

           命令行输入vue ui后自动跳转到浏览器,如果没有跳转,可以复制loca:url到浏览器。

 

 

创建完成 

 

 

运行项目

 

                                 

        如果在前面没有选择初始化git仓库,那么我们可以在项目文件里 git init;git add .;git commit -m “initial commit”,得到

                                            

   整个项目创建完的目录如下:

                                           

其中node_modules中保存的是我们项目开发中所使用的依赖模块。
   *但是 我们在git clone其他人的项目的时候,项目文件中并没有 node_modules文件夹。为什么呢?这个文件夹可能有几百兆大小,如果放到github上,其它人clone的时候会非常慢,这个时候就想到用一个package.json依赖配置文件解决这个问题。那么npm install就会读取package.json中的模块,下载这些模块文件。npm install执行完以后,我们会发现在项目下多了一个 node_modules文件夹。我们安装的依赖文件都可以在这里面找到哦~。
   *当我们在拿到一个项目的时候,使用$ npm install 是会安装 dependencies 和 devDependencies 里所有的依赖包的。 解释npm install干了什么?参考:https://baijiahao.baidu.com/s?id=1621968401461429013&wfr=spider&for=pc
   *最后我们要使用npm run serve 运行项目

补充:如果要删除像node_modules如此大的文件夹,我们可以用命令:$ rm node_modules/ -rf //删除

  三、将项目放到远程仓库

           1.首先在远程上建立一个代码仓库,默认你已经建立了。

           2.  本地操作

//建立分支
git branch 分支名
//查看分支
git branch
//切换分支
git checkout 分支名
//推送到远程
git push -u origin 分支名

 但是如果push的时候出现: fatal: 'origin' does not appear to be a git repository fatal: Could not read from remote repository.  Please make sure you have the correct access rights and the repository exists.说明本地和远程没有连接。则需要:

$ git remote add origin 远程代码库的地址(找到复制)

 如果git remote add origin ...又出现:fatal:remote origin alrealy exists。则

$ git remote rm origin //删除

再
$ git remote add origin 远程代码库的地址(找到复制)
$ git push -u origin 分支名

  最后,还没完-------------------------------------------------------------------------------------------------------------------开始项目吧,呵呵呵。

评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值