创建vue项目步骤
前提:安装node环境一、搭建vue项目1.全局安装vue-clinpm install --global vue-cli2.进入你的项目目录,创建一个基于 webpack 模板的新项目[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EuyCL3cl-1617344228865)(C:\Users\xuzhenzhen\AppData\Roaming\Typora\t
前提:安装node环境
一、搭建vue项目(命令一定要用cmd打开,用PowerShell打开报错)
1.安装vue
npm install vue
2.全局安装vue-cli
npm install --global vue-cli
3.进入你的项目目录,创建一个基于 webpack 模板的新项目
==》 cmd切换目录方法一:
==》 方法二:
在文件所在目录输入cmd,回车,即可在此位置直接打开cmd
(1)方法一:创建项目
vue init webpack 项目名称
说明:
Vue build ==> 打包方式,回车即可;
Install vue-router ==> 是否要安装 vue-router,项目中肯定要使用到 所以Y 回车;
Use ESLint to lint your code ==> 是否需要 js 语法检测 目前我们不需要 所以 n 回车;
Set up unit tests ==> 是否安装 单元测试工具 目前我们不需要 所以 n 回车;
Setup e2e tests with Nightwatch ==> 是否需要 端到端测试工具 目前我们不需要 所以 n 回车;
(2)方法二:创建项目
vue create 项目名称
4.进入项目:cd vue-demo
cd vue–demo
安装依赖(可省略, 以上步骤会自动安装依赖,如有其他需要可自行安装)
npm i
安装成功后,项目文件夹中会多出一个目录: node_modules
5.npm run dev
启动项目
项目启动成功:
二、vue项目目录
1、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生产环境配置;
2、config:项目配置
1)dev.env.js ==> 开发环境变量;
2)index.js ==> 项目配置文件;
3)prod.env.js ==> 生产环境变量;
3、node_modules:npm 加载的项目依赖模块
4、src:这里是我们要开发的目录,基本上要做的事情都在这个目录里。里面包含了几个目录及文件:
1)assets:资源目录,放置一些图片或者公共js、公共css。这里的资源会被webpack构建;
2)components:组件目录,我们写的组件就放在这个目录里面;
3)router:前端路由,我们需要配置的路由路径写在index.js里面;
4)App.vue:根组件;
5)main.js:入口js文件;
5、static:静态资源目录,如图片、字体等。不会被webpack构建
6、index.html:首页入口文件,可以添加一些 meta 信息等
7、package.json:npm包配置文件,定义了项目的npm脚本,依赖包等信息
8、README.md:项目的说明文档,markdown 格式
9、.xxxx文件:这些是一些配置文件,包括语法配置,git配置等
三、接下来就可以开始我们的第一个Vue项目了
1、在components目录下新建一个views目录,里面写我们的vue组件
(1)开始我们的第一个组件:
a:在views目录下新建First.vue
b:在router目录下的index.js里面配置路由路径
c:template 写 html,script写 js,style写样式(在First.vue输入)
d:输入ip: http://localhost:8080/#/first,查看页面效果
四、总结:
main.js是入口文件
router里面的index.js 里面配置路径信息
App.vue是根组件,项目根据根组件里面的内容渲染页面
==》如果App.vue里面是<router-view>
<template>
<div id="app">
<router-view/>
</div>
</template>
那么,在IP地址上根据需要访问的组件,输入index.js中配置的路由地址,组成最新的IP地址,可访问页面,例如:
http://192.168.9.137:8080/xzz_vuex_father
==》如果App.vue里面直接写组件名,如:
<xzz-vuex-father></xzz-vuex-father>
那么,需要在本文件(即App.vue)写上以下三步代码
<template>
<div id="app">
<!--如果不写 <router-view/>-->
<!-- <router-view/>-->
(1)
<xzz-vuex-father></xzz-vuex-father>
</div>
</template>
<script src="./vuex.js"></script>
<script>
(2)
import XZZ_vuex_Father from "./components/vuex/XZZ_vuex_Father"
export default {
name: 'App',
data(){
return {
}
},
components:{
(3)
'xzz-vuex-father':XZZ_vuex_Father,
}
}
</script>
就是最好直接使用第一种方式 , 比较简单
更多推荐
所有评论(0)