上次使用vue+node搭建简易博客过程中,发现自己还有很多的问题需要学习,于是就有了这一系列关于vue的笔记。
vue的安装
一、 直接在页面使用<script>引入,vue会被注册为一个全局的变量。
二、 利用vue-cli搭建开发环境
准备:安装Node 、npm (查看node/npm的版本可以在命令行输入 node -v)
node下载地址:https://nodejs.org/en/download/
1
(1) node和npm安装成功后,继续安装vue-cli 在命令行输入(-g是全局安装)
npm install -g @vue/cli 安装新版本的vue-cli (3.x版本的)
npm uninstall vue-cli -g 旧版本的卸载用
安装成功之后使用 vue - -version 查看版本号
(2) 在vue-cli安装成功之后,开始创建项目(这里没有使用webpack搭建)
执行 vue create my-project
这里都是默认的,安装完成之后cd 进项目,使用 npm run serve 启动项目
启动完成后,下面有端口号,在浏览器打开,出现以下这样的图片就显示创建项目成 功。
至此,一个vue项目就搭建完成。
2 接下来在看vue-cli 2.x来搭建项目
(1) 安装vue-cli
npm install vue-cli -g 安装老1.x或2.x版本的
github地址:vue-cli2.x
(2) 用法
vue init < template-name > < project-name >
<template-name>:表示模板名称,vue-cli官方为我们提供了6种模板
webpack - 一个功能齐全的Webpack + vue-loader设置,具有热加载,linting,测试和 css扩展。(一般使用这个)
webpack-simple - 一个简单的Webpack + vue-loader设置。
browserify 一个全面的Browserify+vueify 的模板,功能包括热加载,linting,单元检测。
browserify -simple - 一个简单Browserify+vueify的模板,不包含其他功能,让你快速的 搭建vue的开发环境。
pwa - 基于webpack模板的vue-cli的PWA模板
simple - 一个最简单的单页应用模板。
(3) 安装成功之后,cd进项目
(4) 安装依赖 npm install
(5)npm run dev 来运行项目,出现和上图一样的界面,就表示一个vue项目就创建成功。