通过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. Windows 系统下 mysql workbench 的安装及环境配置

    1.MySQL的官网地址:https://www.mysql.com/ 2,选择DOWNLOADS 3.选择community 再MySQL workbench 4.安装MySQL workbench ...

  2. LeetCode算法题-Palindrome Linked List(Java实现)

    这是悦乐书的第196次更新,第202篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第58题(顺位题号是234).给出一个单链表,确定它是否是回文.例如: 输入:1-> ...

  3. pip命令安装 pyinstaller失败解决办法

    写在前面,如果是用win10系统的用户,一定要先通过管理员模式打开命令窗口,我是直接按 win + x 键,选择 "Windows Powershell(管理员)",否则会提示:  ...

  4. html 标签学习(续)

    一.基础标签补充 1.div 标签和span标签 (没有特别的样式,常用) div标签用来定义一个块级元素,并无实际的意义.主要通过CSS样式为其赋予不同的表现. span标签用来定义内联(行内)元素 ...

  5. PostgreSQL 数据库NULL值的默认排序行为与查询、索引定义规范 - nulls first\last, asc\desc

    背景 在数据库中NULL值是指UNKNOWN的值,不存储任何值,在排序时,它排在有值的行前面还是后面通过语法来指定. 例如 -- 表示null排在有值行的前面 select * from tbl or ...

  6. mongoDB python 操作

    mongoDB python 操作 import pymongo mongo_client = pymongo.MongoClient(host="127.0.0.1",port= ...

  7. Django 中的 日志处理

    日志处理: 上线后必须使用 便于以后的 维护 管理 根据日志 处理 BUG 在 项目中 定义一个 存放日志的 文件夹 log 存放所有 等级 的 日志 配置: 将下面的日志的 配置 写入 django ...

  8. SQL Access Advisor in Oracle Database 10g

    The SQL Access Advisor makes suggestions about indexes and materialized views which might improve sy ...

  9. ansible-playbook 实战案例 全网备份 实时备份

    目录 ansible-playbook 基础介绍 1.YAML三板斧 2. ansible playbook 安装apache 示例 案例 全网备份 实时备份 环境规划 目录规划 base.yaml ...

  10. linux注释多行

    方法一:使用可视化模块添加实现多行注释 1.打开文件/etc/password进行测试: vim /etc/password 2.进入到视图模式:按ctrl+v 1 root:x:0:0:root:/ ...