初用Vue-cli脚手架
以前也接触过vue这个框架,但是一直也就是项目上的应用,实际上,并不是很了解,现阶段不是很忙,就从头看看,有些值得记录下来的,便写下来了
创建Vue-cli脚手架
1、下载安装Node.js
下载地址:https://nodejs.org/en/download/ ,选择合适自己的版本下载即可。
2、启用cmd
按下Windows+R,在打开的“运行”程序窗口,输入“cmd”,并按下回车键,即可打开系统自带的命令提示符。
3、安装cnpm
npm是Node.js提供的包管理工具,因为npm安装插件是从国外服务器下载,受网络影响大,可能出现异常,我们可以用淘宝 npm 镜像cnpm代替默认的 npm。
使用npm安装cnpm
npm install -g cnpm --registry
4、安装vue-cli
使用cnpm全局安装vue-cli,在cmd中输入一下命令(注:“-g”这个参数意思是全局安装)
cnpm install –g vue-cli
好了,准备工作完成了,开始创建脚手架了
vue init webpack 名字
信息简介
Project name (vuetest) 项目名称,可以自己指定,也可直接回车
Project description (A Vue.js project) 项目描述,也可直接点击回车,使用默认名字。
Author 作者名字,可以自己指定,也可直接回车。
用户选择
Runtime + Compiler: recommended for most users
运行加编译
Runtime-only: about 6KB lighter min+gzip, but templates (or any Vue-specificHTML) are ONLY allowed in .vue files - render functions are required elsewhere
仅运行时
Install vue-router? (Y/n)
是否安装vue-router 一般都是在项目中自己安装路由,所以,选择N
Use ESLint to lint your code? (Y/n)
是否使用ESLint管理代码 是用来统一代码风格的,
Setup unit tests with Karma + Mocha? (Y/n)
是否安装单元测试。
Setup e2e tests with Nightwatch(Y/n)?
是否安装e2e测试。
安装完成效果
然后cd到这个文件夹中,在npm run dev 在浏览器中输入一般端口是默认是8080
出现这个页面,就算安装好了
配置文件
- build: 操作文件夹
- config: 配置文件
- assets: 静态资源
- node-modules:依赖包
- src:存放源码
- static:存放第三方静态资源的库
- babelrc:babelrc解析(将es6转化成es5)
- .editorconfig:编辑器的一些配置(包括编码格式,缩进风格,换行格式).
- .gitignore:配置Git仓库忽略的一些文件(不会上传)index.html: 入口html 文件。
- .postcssrc.js:postcssrc配置文件
- index.html:兼容选项(如果已经安装postcss,需要一大堆loader配置,这时项目根目录会生成“.postcssrc.js”文件)
- package.json:项目的一些配置信息(项目的一些具体信息)
- readme.md:项目说明
具体的还可以参考一下下面几位大神的解说
https://blog.csdn.net/qq_24188927/article/details/81082158
https://blog.csdn.net/chao2458/article/details/81284522