前端小白简单总结,还望各位大佬多多指教~
一、Vue环境搭建(Vue-cli脚手架)
1、你要安装nodejs;
安装nodejs可以看:
2、安装Vue-cli脚手架
Vue-cli是官方的快速构建这个单页应用的脚手架。
npm install -g @vue-cli // 3.x版本 推荐这个,带可视化创建项目vue ui即可启动
npm install -g vue-cli // 2.x版本
3、创建项目
-
可视化创建项目
1)控制台输入命令,打开可视化面板
vue ui
2)选择创建项目,下一步
3)第一次创建就选择手动配置,下一步
4)把Router选上,vuex暂时没用到先不选,下一步
5)选择vue的版本,eslint标准配置,创建项目
预设名保存下来方便下次直接使用
6)安装依赖包
选择运行依赖,安装axios
7)选择任务,选择serve,点击运行,出现如下画面说明运行成功
-
命令行创建项目
1)创建一个工作目录,用来存放你的vue的项目
2)打开控制台,进入到你的工作目录中,选择webpack模板初始化项目
// vue_demo,是你的项目名,不能有大写字母
vue init webpack vue_demo
3)接下来,安装前会有一些选项需要手动选择
- 先是下载模板
- 确认项目名称,enter确认或者修改都可以
- 确认项目描述,enter确认或者修改都可以
- 输入作者名
- 选择编译方式,选第一个推荐的即可
- 选择是否安装vue路由,enter或yes确认
- 是否使用EsLint插件,不能确定遵守EsLint规范,就选n,根据自己的需要安装
- 是否安装测试时用到的这两项,不需要安就选n
- 最后一步,会有安装的一个选项,选择自己喜欢的即可 Yes,use NPM;这是选择npm安装项目; Yes,use Yarn;使用yarn来安装 No,I will ....myself;这是让你自己选择安装的方式
- 到这里就安装完成了
- 项目目录结构: node_modules里面是所有的依赖模块
- 项目结构(借了张图):
- 如果8080端口被占用,可以在config目录下的index.js文件中修改端口号
- 运行项目:
npm run dev
项目打包:
npm run build
二、页面入口:main.js
// 每个vue的项目,都是new了一个vue的实例
new Vue({
// el是element的缩写,把dom节点绑定在vue实例上
el: '#app',
// vue路由
router,
// vue组件
components: { App },
// 把app组件渲染成页面的模板
template: '<App/>'
})
三、Vue文件简单说明
1、Vue的组件结构
Vue的组件结构由三部分组成
- 模板: template,其实就是html
- js: script
- 样式: style,就是css
2、配置路由
- 路由文件:router下的index.js
import Vue from 'vue'
import Router from 'vue-router'
// @/代表src根目录
import HelloWorld from '@/components/HelloWorld'
Vue.use(Router)
export default new Router({
routes: [
{
// 访问路径
path: '/',
// 组件名
name: 'HelloWorld',
// 要呈现的组件
component: HelloWorld
}
]
})
- 在app组件中,以的形式引入,它其实是一个容器,用于呈现路由中配置的组件。