一、NodeJS下载
官网地址
选择版本:
然后一键式安装后,检查是否安装成功:
node -v
npm -v
二、安装Vue工具
修改淘宝镜像
(资源在国外,下载比较慢)
npm config set registry https://registry.npm.taobao.org
npm install -g vue-cli // 只需要第一次安装时执行
创建模板异常
通过vue init webpack my-project 创建项目模板时报以下异常:
Command vue init requires a global addon to be installed.
Please run npm i -g @vue/cli-init and try again.
原因:没有安装init依赖
通过以下语句安装依赖:
npm install -g @vue/cli-init
重新创建项目:
vue init webpack my-project //使用webpack模板创建一个vue项目
? Project name vue_demo01 //项目名称
? Project description A Vue.js project //项目描述(默认回车)
? Author ZXXLXX.1597924 <1360844239@qq.com> //作者
? Vue build (Use arrow keys)
? Vue build standalone //相关的构建方式:推荐的是运行+编译(直接回车)
? Install vue-router? Yes //页面跳转工具(页面路由)
? Use ESLint to lint your code? No //代码检测工具(规范代码格式,刚开始建议不装)
? Set up unit tests No //单元测试
? Setup e2e tests with Nightwatch? No //单元测试
? Should we run `npm install` for you after the project has been created? (recommended) no //一般选择第一个,第一次运行,选择第三个,不运行此命令
项目模板文件夹:
依赖:
下载依赖:
cd my-project //进入到项目目录中
npm install //下载依赖(如果在项目创建的最后一步选择了自动执行npm install,则该步骤可以省略)
下载后依赖的文件夹:
启动项目:
npm run dev //启动项目(此处使用WebStorm启动)
启动成功:
三、Vue 项目结构介绍
1、根目录
- build 文件夹,用来存放项目构建脚本
- config 中存放项目的一些基本配置信息,最常用的就是端口转发
- node_modules 这个目录存放的是项目的所有依赖,即 npm install 命令下载下来的文件
- src 这个目录下存放项目的源码,即开发者写的代码放在这里
- static 用来存放静态资源
- index.html 则是项目的首页,入口页,也是整个项目唯一的HTML页面
- package.json 中定义了项目的所有依赖,包括开发时依赖和发布时依赖
2、src目录
- assets 目录用来存放资产文件
- components 目录用来存放组件(一些可复用,非独立的页面),当然开发者也可以在 components 中直接创建完整页面。
- 推荐在 components 中存放组件,另外单独新建一个 page 文件夹,专门用来放完整页面。
- router 目录中,存放了路由的js文件
- App.vue 是一个Vue组件,也是项目的第一个Vue组件
- main.js相当于Java中的main方法,是整个项目的入口js
四、启动Vue
使用工具为:WebStorm
1、输入指令
在Treminal中输入 npm run dev 后回车
2、启动
3、访问
4、配置自动启动
进入配置页:
配置:
运行:
自动运行成功
五、工程代码解析
1、工程入口
main.js
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
import router from './router'
Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
注:能力有限,还请谅解,争取早日能够写出有质量的文章!
我是皮蛋布丁,一位爱吃皮蛋的热爱运动的废铁程序猿。