转载:https://blog.csdn.net/sunny1660/article/details/78326548

简介:

      vue.js是一套构建用户界面的渐进式框架。比较简洁,用于解耦、可复用的组件来构造界面。轻量级(24kb min+zip),无依赖。与其他重量级框架不同。vue的核心库只关注视图层,它不仅易于上手,还便于与第三方或既有项目整合。
 

开发环境初始安装:

     切记:在cmd中运行命令以管理员身份运行
      1、安装node.js,node.js安装包及源代码下载地址 : https://nodejs.org/en/download/
    2、安装npm,由于新版的node.js已经集成了npm,所以npm也一并安装好了,可以输入“npm -v”和“node -v”来进行测试是否安装成功。
    3、npm升级命令。
          npm   install  npm  -g
    4、使用淘宝定制的cnpm命令行工具代替默认的npm
         npm install -g cnpm --registry=https://registry.npm.taobao.org
  5、使用cnpm来安装模块
     cnpm  install [name]
 
  6、安装vue-cli,vue-cli是vue的脚手框架。
     npm  install -g vue-cli  回车,等待安装...
 
  7、输入vue,回车,若出现vue信息说明安装成功 输入vue -V显示vue版本号
  8、创建项目
     vue init webpack vue_test(项目文件夹)
     [cmd将目录切换到对应的文件下,切记不要手动创建vue_test],回车,出现操作
     
  9、安装依赖
     cd vue_test (项目名)
     npm install,回车,等待...
     [项目文件中,会多出一个node_modules文件夹,也就是之前安装的依赖]
  10、进入环境是否安装成功
      在cmd中输入  npm run dev
 
      [自动打开浏览器窗口,看到实际效果图]
      
   11、npm run build的意义
       在cmd中输入npm  run  build会在项目中创建一个dist文件夹;dist里的文件打包上传至服务器,减少对服务器的压力,一般是项目上线时,直接将dist里的文件打包上传至服务器。
  
 
安装中遇到的问题:
 
   在安装vue-cli脚手框架时,查看vue是否安装成功会显示,
     vue  不是内部或者外部命令...
   解决方法:
     1、在你安装的nodejs目录下搜索vue.cmd
        
     2、将vue.cmd的路径加入到Path环境中,然后重新打开cmd,输入vue或vue -V,可以看到问题已解决。
          

vue安装教程总结的更多相关文章

  1. vue安装教程

    Vue.js 安装教程 安装node.js https://nodejs.org/zh-cn/download/ 选择一个适合自己电脑的版本下载 下载成功, 直接安装, 全部点击下一步 然后输入 黑窗 ...

  2. [Vue安装教程]十分钟学会vue 安装

    Vue的安装主要有一下几个步骤: 1.安装npm淘宝镜像 npm install -g cnpm --registry=https://registry.npm.taobao.org 2.安装脚手架工 ...

  3. 2.vue 安装教程

    安装node.js 从node.js官网下载并安装node,安装过程很简单,一路"下一步"就可以了(傻瓜式安装). 安装完成之后,打开命令行工具,输入 node -v,如下图,如果 ...

  4. vue 安装教程(自己安装过程及遇到的一些坑)

    1.安装node.js(http://www.runoob.com/nodejs/nodejs-install-setup.html) 2.基于node.js,利用淘宝npm镜像安装相关依赖 在cmd ...

  5. Vue 安装教程

    1.下载node.js https://nodejs.org/en/ 2.检查环境变量: npm init (初始化项目) npm i webpack vue vue-loader 安装依赖: npm ...

  6. nodeJs+vue安装教程详解 相信

    相信很多朋友都在装node服务和安装vue的时候会遇到一些问题,下面为大家详细介绍node服务的安装以及vue的安装: 1.nodeJs官网下载版本(根据自己电脑的配置进行相应下载即可):默认安装路径 ...

  7. VUE 入门教程

    http://www.runoob.com/w3cnote/vue-js-quickstart.html VUE安装教程 https://segmentfault.com/a/119000001218 ...

  8. Vue框架下的node.js安装教程

    Vue框架下的node.js安装教程 python服务器.php  ->aphche.java ->tomcat.   iis -->它是一个可以运行JAVASCRIPTR 的运行环 ...

  9. npm安装vue详细教程(图片详解)

    npm安装vue详细教程(图片详解) 一.总结 一句话总结:整个安装流程照着教程来,注意系统环境变量的配置,注意一下npm的本地仓库和缓存位置 教程 系统环境变量 仓库 缓存 1.什么情况下最适合用n ...

随机推荐

  1. web字体的设置

    @font-face { font-family: 'OpenSans'; src: url("../fonts/open-sans-v15-latin-regular.woff2" ...

  2. hihocoder1364 奖券兑换

    题目链接 思路 乍一看这是一个01背包的裸题.但是数据范围\(10^5\)是无法承受的. 但是发现\(p_i\)和\(w_i\)只有10,也就是说最多只有100种物品.所以可以对他们进行分组.然后用二 ...

  3. 网页HTML代码在线运行器

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. fcntl F_SETFL

    F_SETFL file set flag F_SETFL命令允许更改的标志有O_APPEND,O_NONBLOCK,O_NOATIME,O_DIRECT,O_ASYNC 这个操作修改文件状态标记适用 ...

  5. gradle 的jar下载到哪里了

    很好奇 gradle 的jar下载到哪里了,好顿翻,原来在C:\Users\(你的用户名)\.gradle\caches\modules-2\files-2.1目录下,使用gradle引用lib会先查 ...

  6. Ubuntu下载报错“文件尺寸不符”

    最近学习openfoam,安装双系统后,根据官网进行安装openfoam,在文件的下载中会出现: “文件尺寸不符” 这个错误是因为网络不好造成的,或是请求的网站无回应. 解决的办法手机打开4G,打开热 ...

  7. STM32L011D4 ----- 低功耗

    After resuming from STOP the clock configuration returns to its reset state (MSI, HSI16 or HSI16/4 u ...

  8. makefile解析:一些常用函数

    #======================================================================= #指定目标文件名,makefile中的变量直接使用不用 ...

  9. css换行

    1. word-break:break-all;只对英文起作用,以字母作为换行依据 2. word-wrap:break-word; 只对英文起作用,以单词作为换行依据 3. white-space: ...

  10. 「Python」6种python中执行shell命令方法

    用Python调用Shell命令有如下几种方式: 第一种: os.system("The command you want"). 这个调用相当直接,且是同步进行的,程序需要阻塞并等 ...