vue的安装和环境设置
vue-cli2.0没有可视化图形界面的,所以整个下载和创建项目的过程,我们都是在cmd里面进行。
(据说cli3.0出了图形操作界面)
这里采用官网上面推荐的npm方式:
需要下载和安装的:
- node.js:自带npm
- vue-cli:脚手架构建工具,可以帮助我们创建项目
- vue-router:vue跳转页面的路由,在创建项目时候可选择安装
- 依赖:安装项目所必须的依赖文件
- VScode:最好用来写vue代码的IDE
1.安装node.js
安装完成后:
打开命令行检测版本信息:分别输入node-v npm-v
2.安装国内淘宝镜像cnpm
用cnpm来替代npm,加速我们接下来依赖环境的下载速度
输入命令:npm install -g cnpm --registry=http://registry.npm.taobao.org
3.安装vue-cli脚手架工具
- 输入命令:npm install -g vue-cli
- 在本地电脑创建一个目录来保存vue项目
- 并进入到该目录下:cd NodeTest
创建一个项目:
输入命令:vue init webpack firstApp
firstApp为项目名,你可以自己随便起名,但要注意命名规则
运行初始化命令的时候会让用户输入几个基本的配置选项,如项目名称、项目描述、作者信息等等,
对于有些不明白或者不想填的信息可以一直按回车去填写。
Install vue-router? 这里选yes,没选也没事,后面可以在IDE里手动安装。
接着去看项目是否创建成功:
4.项目创建成功,但还缺少依赖文件
进入到项目中,安装项目的依赖
输入命令:cd firstApp
输入命令:cnpm install
如果安装过程无反应或者意外中断,可以关闭cmd重新打开,重复这一步命令。
安装完成:进入项目目录下可以看到多出一个node_modules文件夹
5.安装IDE:VScode
官方网站:https://code.visualstudio.com/
下载对应自己电脑的版本
6.运行项目
将创建好的项目拖拽入VScode当中,在下面的终端
输入命令:npm run dev
这样项目就被启动起来了:
接下来在浏览器看到如下页面:
这是vue的helloworld页面,至此vue的环境已经配置完毕。
7.介绍一下各个目录文件的作用
介绍一下目录及其作用:
build:最终发布的代码的存放位置。
config:配置路径、端口号等一些信息,我们刚开始学习的时候选择默认配置。
node_modules:npm 加载的项目依赖模块。
src:这里是我们开发的主要目录,基本上要做的事情都在这个目录里面,里面包含了几个目录及文件:
assets:放置一些图片,如logo等
components:目录里放的是一个组件文件,放置我们书写的vue页面。
App.vue:项目入口文件,我们也可以将组件写这里,而不使用components目录。
main.js :项目的核心文件
static:静态资源目录,如图片、字体等。
test:初始测试目录,可删除
.XXXX文件:配置文件。
index.html:首页入口文件,可以添加一些meta信息或者其他的信息。
package.json:项目配置文件。
README.md:项目的说明文件。
这就是整个项目的目录结构,其中,我们主要在src目录中做修改。