项目的创建
VUE提供的模板
输入命令vue list就可以查看vue提供的模板了。
VUE一共提供6个模板。
进入项目要放置的路径
打开命令符窗口。wind+R→输入cmd→回车
进入到项目要放的路径下:
然后输入命令创建项目
第一种webpack-simple模板下的项目:
输入命令:
vue init webpack-simple one//one是项目名称
然后会让你进行一些选择
到此我们的一个webpack-simple模板下的项目建立完成
第二种webpack模板下的项目:
输入命令
vue init webpack one//two是项目名称
然后进行项目创建的选择
webpack与webpack-simple两个的区别:
webpack-simple适合小项目,而webpack适合大中型项目。
其他主要就是项目的目录差别很大,webpack初始化项目,提供了很多webpack的配置,方便对于代理、最终打包和js、css、img等优化的配置都比较方便。
安装项目依赖及启动项目
首先先定位到项目的目录下,然后在安装项目依赖
cd mytest//定位到项目的目录下
cnpm install//安装项目依赖
然后我们开始启动项目
cnpm run dev
获取到项目链接,可在浏览器打开
项目目录
build:构建脚本目录
1)build.js ==> 生产环境构建脚本;
2)check-versions.js ==> 检查npm,node.js版本;
3)utils.js ==> 构建相关工具方法;
4)vue-loader.conf.js ==> 配置了css加载器以及编译css之后自动添加前缀;
5)webpack.base.conf.js ==> webpack基本配置;
6)webpack.dev.conf.js ==> webpack开发环境配置;
7)webpack.prod.conf.js ==> webpack生产环境配置;
config:项目配置
1)dev.env.js ==> 开发环境变量;
2)index.js ==> 项目配置文件;
3)prod.env.js ==> 生产环境变量;
node_modules:npm 加载的项目依赖模块
src:开发的目录,包含了几个目录及文件:
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)App.vue:根组件;
5)main.js:入口js文件;
static:静态资源目录,如图片、字体等。不会被webpack构建
index.html:首页入口文件,可以添加一些 meta 信息等;
package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
README.md:项目的说明文档,markdown 格式
.xxxx文件:这些是一些配置文件,包括语法配置,git配置等;