vue-cli vue脚手架开发(项目搭建)

本文介绍了如何使用Vue CLI进行项目初始化,包括安装、创建项目、目录结构解析及关键文件作用。通过vue init webpack命令创建项目,选择所需配置,并讲解了项目目录中各部分的功能,如build、src、static等目录的用途。最后,文章还提供了项目启动及运行的步骤。
摘要由CSDN通过智能技术生成

vue-cli vue脚手架开发(项目搭建)

1 、 安装vue-cli

​ 确保电脑安装了node环境,输入以下命令检测是否安装了node

node -v     //显示版本号说明安装了node    如果提示node不是内部命令,那就就去安装node

node的安装地址:https://nodejs.org/en/download/

npm install vue-cli -g    //全局安装脚手架工具

如果电脑上安装了cnpm淘宝镜像,可以使用cnpm 安装

cnpm install vue-cli -g

如果没有淘宝镜像可以先安装淘宝镜像

npm install cnpm -g --registry=http://registry.npm.taobao.org

执行完毕 执行 cnpm/npm install vue-cli -g 该命令 安装脚手架工具

vue -V    //显示版本号说明安装成功
2.9.6

2 、初始化vue项目

  • 找到需要存储项目的目录
  • 在该目录下执行命令
vue init webpack 项目名(英文)
downloading template        			// 下载模板中
? Project name (vuedemo)  				// 项目名    回车
? Project description (A Vue.js project)    // 项目描述   回车
? Author   // 作者   回车
? Vue build (Use arrow keys)   // 使用哪种模式   方向键山下移动去选择, 回车键确定   
❯ Runtime + Compiler: recommended for most users    // 选择这个,回车
  Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specific H
TML) are ONLY allowed in .vue files - render functions are required elsewhere
? Install vue-router? (Y/n) n   // 安装vue-router 路由吗?  我们现在输入n,以后讲了路由之后输入y 回车
? Use ESLint to lint your code? (Y/n)  // 使用eslint检测代码吗?   输入n   回车
? Set up unit tests (Y/n)   // 是否建立单元测试,输入n  回车
? Setup e2e tests with Nightwatch? (Y/n)    // 使e2e检测吗   输入n  回车
? Should we run `npm install` for you after the project has been created? (recom
mended) (Use arrow keys)  // 项目创建成功之后是否使用npm install 安装项目所依赖的包
❯ Yes, use NPM    // 使用npm包管理工具
  Yes, use Yarn   // 使用yarn包管理工具
  No, I will handle that myself   // 不需要,我自己将来选择   // 建议选择这个,后期用cnpm 安装依赖包
 vue-cli · Generated "vuedemo".

# Project initialization finished!
# ========================

To get started:  // 输入以下运行项目
 
  cd vuedemo     //   进入该目录
  npm install (or if using yarn: yarn)   // 安装项目所依赖的包!   建议操作的时候使用  cnpm install
  npm run dev   // 启动项目   这里面不要使用cnpm run dev
  
Documentation can be found at https://vuejs-templates.github.io/webpack

// 执行以上命令,出现了 以下内容,说明项目已经成功运行在8080端口
Your application is running here: http://localhost:8080    

3 、目录及文件介绍

myvue  // 项目名称 
--| build   // 【目录】 打包的配置信息内容
--|---| build.js      		 // 【文件】 打包的时候的配置
--|---| check-versions.js   // 【文件】  版本检测文件
--|---| logo.png   					//【文件】 logo图片
--|---| utils.js   					//【文件】  工具文件
--|---| vue-loader.conf.js 	//【文件】  vue-loader配置  解析.vue格式文件
--|---| webpack.base.conf.js//【文件】  webpack的基础配置文件
--|---| webpack.dev.conf.js //【文件】  webpack在开发环境下的配置
--|---| webpack.prod.conf.js//【文件】  webpack在生成环境下的配置
--| config  // 【目录】 配置文件目录
--|---| dev.env.js  // 【文件】  开发环境配置
--|---| index.js    // 【文件】  配置变量主文件  【重要!!!】  配置跨域在这里!
--|---| prod.env.js // 【文件】  生成环境配置
--| node_modules    // 【目录】 项目依赖的包文件
--| src     //【目录】 【重要!!!】开发目录,我们平时开发工作都在这个文件夹下面
--|---| assets   				// 这里存放的是css,图片等静态资源,但是会被webpack进行打包
--|---| components  		// 组件目录,可以删除被重构都行
--|---| App.vue   			// 重要!   项目的根组件
--|---| main.js   		  // 重要!   项目的入口文件
--| static  //【目录】 静态文件目录,这里的文件,webpack不会进行打包, 一般会在这里放一些静态的js,字体文件
--| .babelrc        // 【文件】 babel的配置文件,解析es6语法
--| .editorconfig  // 【文件】 编辑器的配置文件
--| .gitignore     // 【文件】 git忽略的文件
--| .postcssrc.js  // 【文件】  css的使用配置文件
--| index.html     // 【文件】  【重要!!!】  单页面应用开发的那个唯一的HTML文件
--| package.json   // 【文件】  包配置文件,这里有项目所依赖的所有包内容
--| README.md  	   // 【文件】  说明文件

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值