Vue-cli搭建vue基础项目
目录一、引言二、项目创建1、安装node2、全局安装cnpm3、全局安装webpack和webpack-cli4、全局安装vue-cli5、使用vue-cli创建项目6、开发运行项目7、打包发布项目8、调试工具插件三、总结 一、引言 首先必须明确vue-cli是什么,就是一个脚手架,为了方便使用创建webpack项目,这个...
目录
一、引言
首先必须明确vue-cli是什么,就是一个脚手架,为了方便使用创建webpack项目,这个项目包含了已经配置好的vue,vue-cli依赖webpack。
那么webpack是什么,是前端资源模块化管理和打包工具,将所有文件都会当作模块加载,进行整合压缩,处理成浏览器可以直接解析的小而规律的文件。
下图是对webpack一些简单的认识
二、项目创建
1、安装node
因为webpack要用到node中的npm,npm是前端的包管理工具,类似管理java中的jar包。node官网直接下载,最好下新版本。
2、全局安装cnpm
这个是淘宝的镜像,下载js的地方,因为国内网速差所以用这个镜像,如果你网速好可以忽略
npm install -g cnpm --registry=https://registry.npm.taobao.org
3、全局安装webpack和webpack-cli
vue-cli依赖,webpack肯定要装,webpack依赖webpack-cli,所以也要装
cnpm install webpack webpack-cli -g
然后执行
webpack -v
有版本输出说明安装成功
4、全局安装vue-cli
终于进入正题安装vue-cli了
cnpm install -g vue-cli
然后执行
vue -V
有版本输出说明安装成功
5、使用vue-cli创建项目
5.1创建空文件夹,执行
vue init webpack vue-demo
5.2等一会控制台会出现一些配置参数让你选择,基本默认就可以
? Project name vue-demo # 项目名称,直接回车,按照括号中默认名字(注意这里的名字不能有大写字母,如果有会报错Sorry, name can no longer contain capital letters),阮一峰老师博客为什么文件名要小写 ,可以参考一下。
? Project description A Vue.js project # 项目描述,随便写
? Author # 作者名称
? Vue build standalone # 我选择的运行加编译时
Runtime + Compiler: recommended for most users
? Install vue-router? Yes # 是否需要 vue-router,路由肯定要的
? Use ESLint to lint your code? Yes # 是否使用 ESLint 作为代码规范.
? Pick an ESLint preset Standard # 一样的ESlint 相关
? Set up unit tests Yes # 是否安装单元测试
? Pick a test runner 按需选择 # 测试模块
? Setup e2e tests with Nightwatch? 安装选择 # e2e 测试
? Should we run `npm install` for you after the project has been created? (recommended) npm
6、开发运行项目
修改一下配置参数
执行下面的命令,运行程序
npm run dev
实际执行的是package.json中的
直接就能在浏览器中看到界面啦。。。
7、打包发布项目
执行下面的命令,打包程序到dist文件夹,与npm run dev类似,实际运行的命令为上图中的build内容。
npm run build
将dist文件夹里面的内容打包到tomcat或者iis根路径,访问localhost:port即可
这里有时候我们不放到web服务器根路径,访问localhost:port/项目文件夹 会访问不到,这个时候我们要修改index.js文件夹中的配置assetsPublicPath,然后就可以了。
8、调试工具插件
chrome中有调试插件,直接安装
三、总结
- vue-cli与webpack介绍
- vue-cli安装
- vue-cli创建项目
更多推荐
所有评论(0)