Vue项目 一、准备以及初始项目解析

准备

技术栈

  • Html+css+javascript
  • webpack
  • ES6基本语法
  • Vue
  • vue-router 路由
  • axios 网络请求
  • Vuex 状态管理
  • scss css预编译

安装

1、安装vue
npm install vue -g
2、安装vue-cli脚手架
npm install --global vue-cli

项目初始化

1、初始项目

    使用vue-cli脚手架工具初始化一个vue项目:

vue init webpack my-object
cd my-boject
npm install
npm run dev

项目目录如图:

这里写图片描述

build  //最终发布的代码存放的位置
config   //配置目录,包括端口号等
node_modules  //npm加载的项目依赖模块
src  //这里是我们要开发的目录,基本上要做的事情都在这个目录里。
static  //静态资源目录,如图片、字体等。
package.json //项目配置文件,这个用于控制项目的依赖。使用npm加载依赖时,会按照这个文件里面描述的各个依赖模块的版本进行查找,先查找node_modules目录下是否已存在某个依赖,若不存在再去网络下载,但是不会查找本地缓存中已经下载好的。
index.html  //项目的入口
static/.gitkeep  //这个文件保证这个文件夹在上传到github的时候会始终存在。因为github本身会忽略掉空文件夹。
.babelrc  // babel语法编译器的编译配置
.editorconfig  //编辑器的配置
.eslintignore  //忽略语法检查的目录
.eslintrc.js  //eslint的配置文件
.gitignore   //一些不需要上传的文件或者目录
README.md   //项目的描述文件


我们最需要关注的,就是src里面的内容

这里写图片描述

asset  //放置一些图片
components  //组件目录,用于放置一些组件
router  //路由文件
App.vue  //项目入口文件,可以将组件都写在里面
main.js  //项目的核心文件

初始文件展示

//index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <
  • 4
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值