VUE建立项目


项目的创建

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配置等;

发布了102 篇原创文章 · 获赞 25 · 访问量 2万+

猜你喜欢

转载自blog.csdn.net/make_1998/article/details/104680870