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

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  	   // 【文件】  说明文件