前端小白简单总结，还望各位大佬多多指教~
一、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组件中，以的形式引入，它其实是一个容器，用于呈现路由中配置的组件。
