玖叶教程网

前端编程开发入门

VUE脚手架的快速搭建方式以及内部目录结构

a、 搭建Vue脚手架的方式,首先,检查电脑是否已经安装好了node,且node版本不能低于6.0.0
查询node使用命令行 node-v (如果版本过低可以去官网下载安装即可)

b、 检查完了node后就可以开始着手安装了,
1、 首先,先要安装好稳吧pack

命令行 npm install webpack -g

2、 在webpack安装好的基础上,我们开始安装Vue-cli脚手架,

命令行 npm install cue-cli -g

检查是否安装成功

命令行 vue -V
3、 在本地人任意位置创建新建项目文件夹,按住shift键单击鼠标右键,进入命令行窗口

4、创建一个Vue的工程
Vue init webpack-simple 工程名字 /vue initwebpack 工程名字

之后点击enter键,里面的全是项目描述,可写可不写,

5、之后安装依赖

cd vue-test (vue-test ==工程名称)

npm install
npm run dev (启动Vue工程命令行)

启动后,经等待几秒钟,进入页面


Vue搭建环境说完了,
下面列出了Vue项目目录的结构和名称

配置信息
|-- build // 项目构建(webpack)相关代码
| |-- build.js // 生产环境构建代码
| |-- check-version.js // 检查node、npm等版本
| |-- dev-client.js // 热重载相关
| |-- dev-server.js // 构建本地服务器
| |-- utils.js // 构建工具相关
| |-- webpack.base.conf.js // webpack基础配置
| |-- webpack.dev.conf.js // webpack开发环境配置
| |-- webpack.prod.conf.js // webpack生产环境配置
|-- config // 项目开发环境配置
| |-- dev.env.js // 开发环境变量
| |-- index.js // 项目一些配置变量
| |-- prod.env.js // 生产环境变量
| |-- test.env.js // 测试环境变量
|-- src // 源码目录
| |-- components // vue公共组件
| |-- store // vuex的状态管理
| |-- App.vue // 页面入口文件
| |-- main.js // 程序入口文件,加载各种公共组件
|-- static // 静态文件,比如一些图片,json数据等
| |-- data // 群聊分析得到的数据用于数据可视化
|-- .babelrc // ES6语法编译配置
|-- .editorconfig // 定义代码格式
|-- .gitignore // git上传需要忽略的文件格式
|-- README.md // 项目说明
|-- favicon.ico
|-- index.html // 入口页面
|-- package.json // 项目基本信息


喜欢小编的或者认为有用的欢迎动动您的小手指点个关注点个赞,或者有什么疑问有什么想法的也欢迎在评论区留言, 后面还将为大家带来更新的精彩内容阿巴阿巴[做鬼脸]!

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言