通过JS引用vue就不说了,重点说一下使用npm搭建vue脚手架. (以下是windows系统下的操作,win7+)

    npm是个命令行工具,在搭建vue脚手架之前首先要安装nodeJS,下面是node的下载地址:

    https://nodejs.org/en/

    

    左边的8.11.3是我写博文这个时候的最稳定版本, 生产环境请下载这个,实验学习阶段随意。右边是当前最新版本。

    下载下来以后常规安装即可。

    


    http://doc.vue-js.com/v2/guide/installation.html

    根据这里的vue安装介绍,我们开始搭建vue脚手架了!

    安装最新稳定版vue  $ npm install vue,如已安装再次执行的时候则是更新操作,如下图,我安装过了所以提示更新了:

    

    (补一句,对于不写node仅是为了构建vue项目的我们来说,目前我们用不上node的那个命令框,安装node也只是为了一个npm命令的环境,安装vue的时候在dos里敲命令即可)

    安装完成以后执行 vue  --version 可以查看当前vue的版本。

    

    shell操作如下所示,全局安装vue-cli,接着创建一个基于webpack模板的新项目,cd的要存放的文件目录以后执行安装,最后运行即可。

    

     dos不动的时候,回车输y,表示安装附带的一些插件(也可以选n,后面需要时再安装,建议选y)

    

    dos下面不动了基本就表示安装完成。

    

    注意一下啊,上面还有一句cd my-project,意思是要先cd到项目跟目录,在执行npm run dev 运行项目,执行完以后会这样:

    

    浏览器打开后如图:

    (注意哈,上面的dos别关闭,这个时候关闭了项目就停止运行了!)

    

    以上,我们就完成了vue项目的脚手架的搭建。

    

    生成的目录结构是这样的。关于vue的更多讲解,未完待续.......

  

    

vue入门(一)的更多相关文章

  1. wepack+sass+vue 入门教程(三)

    十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...

  2. wepack+sass+vue 入门教程(二)

    六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...

  3. wepack+sass+vue 入门教程(一)

    一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...

  4. vue入门学习(基础篇)

    vue入门学习总结: vue的一个组件包括三部分:template.style.script. vue的数据在data中定义使用. 数据渲染指令:v-text.v-html.{{}}. 隐藏未编译的标 ...

  5. VUE 入门笔记

    前端的MVVM概念今年来也算是如火如荼,了解完 MVVM的概念,也该找个去尝试下 首先我先试了下 国内小而美的 VUE 试着照着文档敲出入门文件,内容都在注释里 <!doctype html&g ...

  6. Vue 入门指南 JS

    Vue 入门指南 章节导航 英文:http://vuejs.org/guide/index.html 介绍 vue.js 是用来构建web应用接口的一个库 技术上,Vue.js 重点集中在MVVM模式 ...

  7. Vue学习记录第一篇——Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  8. parcel+vue入门

    一.parcel简单使用 npm install -D parcel-bundler npm init -y (-y表示yes,跳过项目初始化提问阶段,直接生成package.json 文件.) Pa ...

  9. Vue入门基础

    前面的话 Vue中文文档写得很好,界面清爽,内容翔实.但文档毕竟不是教程,文档一上来出现了大量的新概念,对于新手而言,并不友好.个人还是比较喜欢类似于<JS高级程序设计>的风格,从浅入深, ...

  10. 学习Vue 入门到实战——学习笔记

    闲聊: 自从进了现在的公司,小颖就再没怎么接触vue了,最近不太忙,所以想再学习下vue,就看了看vue相关视频,顺便做个笔记嘻嘻. 视频地址:Vue 入门到实战1.Vue 入门到实战2 学习内容: ...

随机推荐

  1. SD寄售-寄售补充

    SD寄售-寄售补充 概述: 寄售就是企业将货物寄放在客户处,或者在自己的仓库为客户保留库存,货物所有权归公司,当客户将库存消耗掉,才算公司的销售.公司才开票给客户. SAP SD寄售涉及4个业务过程, ...

  2. May 23. 2018 Week 21st Wednesday

    You should love and take care of yourself because after all, it is your own life. 要学会爱自己,照顾自己,毕竟生活是你 ...

  3. nginx 拦截 swagger 登录

    随着微服务的也来越多,每个服务都有单独的文档,那么问题来了,怎么把所有文档整合在一起呢 本方法采用服务器拦截的方式进行处理 首先需要在opt 的主目录中 /opt/ 创建一个新文件 htpasswd此 ...

  4. 【Linux基础】Linux更改系统IP

    1.SUSE系统 (1)设置IP cd /etc/sysconfig/network/ vi ifcfg-eth0 BOOTPROTO='static'   #静态IPBROADCAST='192.1 ...

  5. display:table-cell几种应用

    http://www.zhangxinxu.com/wordpress/2010/10/%E6%88%91%E6%89%80%E7%9F%A5%E9%81%93%E7%9A%84%E5%87%A0%E ...

  6. 5.01-requests_auth

    import requests # 发送post请求 data = { } response = requests.post(url, data=data) # 内网 需要 认证 auth = (us ...

  7. vue自定义指令用法总结及案例

    1.vue中的指令有哪些?

  8. Python 的 GUI 开发工具

    kivy https://kivy.org/#home flexx https://flexx.readthedocs.io/en/stable/

  9. 动态记忆网络(DMN)

    论文:Ask Me Anything: Dynamic Memory Networks for Natural Language Processing 1.概述 Question answering( ...

  10. 使用pkg打包Node.js应用的方法步骤

    Node.js应用不需要经过编译过程,可以直接把源代码拷贝到部署机上执行,确实比C++.Java这类编译型应用部署方便.然而,Node.js应用执行需要有运行环境,意味着你需要先在部署机器上安装Nod ...