前端项目搭建必备技术
webpack
nodejs 搭建
vue-cli 的安装
以上技术自行了解安装
一:创建前端项目 采用vue-cli 脚手架
1:终端执行如下命令
vue init webpack my-vue 创建一个my-vue的项目
2:cd 到项目路径下 执行如下命令启动项目
npm install 安装必备的依赖
npm run dev 启动项目
二项目目录的介绍
1:项目目录
2:下面每个目录介绍下
build目录 存放webpack 打包构建项目 js 文件
config 目录 存放项目运行时的配置文件 如项目启动时的端口文件
test 开头的js 文件时 在创建项目时需要测试时才会生成
node_modules 文件 及 子目录
这个文件夹里面全部都是node的一些基础的依赖包,当我们拓展的安装一些别的插件时 也会装在这个文件夹里。
src 文件 及 子目录(重点)
这个文件夹 是 整个项目的主文件夹 , 我们的代码大部分都在这里完成
assets 文件夹里面主要放置一些资源文件。比如js 、css 之类的文件。
实际开发中可能会单独建立一个文件夹 如api 存放各种请求的js文件
components 文件夹可以说是vue 的 灵魂了 , 组件文件全部都可以放到这里面。
组件 !一个vue项目就是由一个个的组件拼装起来的。
注意 有些大型项目 会把最通用的组件放到这里 然后每个页面做成单独的组件放在自定义的
页面组件文件夹中如views
router 文件夹 及 子目录(重点)
这个文件夹里的是整个vue项目的路由,vue 是单页面应用的代表,这里面就是设置一个一个组件的地址的文件。
一般只有一个index.js 文件
app 文件
这个文件是整个项目的入口文件,相当于包裹整个页面的最外层的div。
也可以理解为最大的组件
main.js 文件
这个文件是项目的主js,全局的使用的各种变量、js、插件 都在这里引入 、定义
static 文件夹 专门存放一些静态资源 如工具类 url等
初次意外 开发中 通用的插件一般也会定义在src 目录下
所以src 这个目录 非常重要
3:其他配置文件
index.html 项目的承载页面
package.json 文件是整个项目用的到的所有的插件的json的格式 比如 这个插件的 名称 , 版本号。
当在项目里使用npm install 时 node 会自动安装, 这个文件里的所有插件。
剩下的不用管
最后总结下这个最基本的vue 项目结构