Vuejs初探以及VueCli脚手架搭建
1、背景 主要介绍vue-cli搭建以及搭建过程中的问题2、概念介绍 什么是nodejs:它的作用就相当于java中jvm一样,是一个运行时环境。什么是npm:nodejs平台上的包管理工具,卸载安装运行等都是通过它进行。什么是vuejs:vuejs一个前端框架,相当于java后台ssm框架一样。vuejs全家桶包括:vue-router:路由,vuex:状态管理, vu...
1、背景
主要介绍vue-cli搭建以及搭建过程中的问题
2、概念介绍
什么是nodejs:它的作用就相当于java中jvm一样,是一个运行时环境。什么是npm:nodejs平台上的包管理工具,卸载安装运行等都是通过它进行。什么是vuejs:vuejs一个前端框架,相当于java后台ssm框架一样。vuejs全家桶包括:vue-router:路由,vuex:状态管理, vue-resource:请求工具,再加上构建工具vue-cli,什么是webpack:可以看做是模块打包机:它做的事情是,分析你的项目结构,找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言(Scss,TypeScript等),并将其打包为合适的格式以供浏览器使用。
3、安装介绍
1)、vue的安装只需安装构建工具即可,其他的都会依赖安装,但是前提是需要安装node以及npm。命令:npm install --global vue-cli,这是全局安装的意思。如果安装成功会在C:\Users\用户\AppData\Roaming\npm,出现vue的运行工具。
安装过程报错信息:
解决方法:
1、 npm cache clean --force
2、 再执行 npm install 操作
2)、安装 webpack npm install --global webpack,安装成功后在npm目录下如下
4、vue-cli项目脚手架搭建
直接在项目文件目录下运行语句: vue init webpack 项目名称
示例如下:
5、项目文件目录结构分析
build:这里主要是放webpack的一些配置
conifg : vue项目的基本配置文件
node_modules : 项目中安装的依赖模块
src : 源码文件夹,基本上文件都应该放在这里
static : 生成好的文件会放在这个目录下。
test : 测试文件夹,测试都写在这里
.babelrc babel编译参数,vue开发需要babel编译
.editorconfig 看名字是编辑器配置文件,不晓得是哪款编辑器,没有使用过。
.gitignore 用来过滤一些版本控制的文件,比如node_modules文件夹
index.html 主页
package.json 项目文件,记载着一些命令和依赖还有简要的项目描述信息
README.md 介绍自己这个项目的,想怎么写怎么写。不会写就参照github上star多的项目,看人家怎么写的
具体每个目录下的文件描述:可以参考博客: https://www.jb51.net/article/118561.htm
更多推荐
所有评论(0)