vue.js怎么创建项目

介绍

这篇文章主要介绍了vue。js怎么创建项目,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。

创建方法:1、安装节点环境;2,用“npm安装——全球vue-cli”命令全局安装vue-cli; 3,用“vue init webpack项目名“命令创建项目;4,进入项目,用“cnpm我命令安装依赖即可。

<强>一、安装节点环境

<强> 1,下载地址为:https://nodejs.org/en/

2,检查是否安装成功:如果输出版本号,说明我们安装节点环境成功

vue。js怎么创建项目

3,为了提高我们的效率,可以使用淘宝的镜像:http://npm.taobao.org/

输入:npm安装- g cnpm注册表=https://registry.npm.taobao.org,即可安装npm镜像,以后再用到npm的地方直接用cnpm来代替就好了。

vue。js怎么创建项目

检查是否安装成功:

vue。js怎么创建项目

<强>二、创建项目,搭建vue项目环境

1,全局安装vue-cli

vue。js怎么创建项目

说明:

Vue构建==比;打包方式,回车即可。

安装vue-router==比;是否要安装vue-router,项目中肯定要使用到所以Y回车;

使用ESLint线头代码==比;是否需要js语法检测目前我们不需要所以n回车;

==比建立单元测试;是否安装单元测试工具目前我们不需要所以n回车;

设置e2e与夜班==比测试;是否需要端到端测试工具目前我们不需要所以n回车;

3,进入项目:cd vue-demo,安装依赖

vue。js怎么创建项目

安装成功后,项目文件夹中会多出一个目录:node_modules

vue。js怎么创建项目

4, npm运行dev,启动项目

项目启动成功:

vue。js怎么创建项目

<强>三,vue项目目录讲解

<强> vue。js怎么创建项目

<强> 1,构建:构建脚本目录

1)构建。js,==比;,生产环境构建脚本;<代码类="语言文本">

2) check-versions。js,==比;,检查npm、节点。js版本;

3)跑龙套。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生产环境配置;

2,配置:项目配置

1) dev.env。js,==比;,开发环境变量;

2)指数。js,==比;,项目配置文件;

3) prod.env。js,==比;,生产环境变量;

3, node_modules: npm加载的项目依赖模块

4, src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:

1)资产:资源目录、放置一些图片或者公共js,公共css。这里的资源会被webpack构建;

2)组件:组件目录,我们写的组件就放在这个目录里面;

3)路由器:前端路由,我们需要配置的路由路径写在索引。js里面;

4)应用程序。vue:根组件;

5)主要。js:入口js文件;

5,静态:静态资源目录,如图片,字体等。不会被webpack构建

6,指数。html:首页入口文件,可以添加一些元信息等

7包。json: npm包配置文件,定义了项目的npm脚本,依赖包等信息<代码类="语言文本">

8日README。md:项目的说明文档,减价格式

9日。xxxx文件:这些是一些配置文件,包括语法配置,git配置等

<强>四,开始我们的第一个vue项目

1,在组件目录下新建一个视图目录,里面写我们的vue组件

1)开始我们的第一个组件:

:在视图目录下新先建。vue

b:在路由器目录下的指数。js里面配置路由路径

vue。js怎么创建项目

c:模板写html脚本写js,风格写样式

vue.js怎么创建项目