搭建vue项目环境并创建一个简单的vue示例

如何搭建一个vue项目

一、安装node环境

1.下载地址https://nodejs.org/en/download/

根据不同的配置选择合适安装包

在这里插入图片描述
一路next,这里需要注意的是,如果需要修改安装地址 可以选择别的盘存储。
在这里插入图片描述在这里插入图片描述
最后点击finish安装完成,至此nodejs已经安装完成,后面还要进行环境变量的配置。
简单测试一下 win+R 打开窗口,输入cmd,回车

在这里插入图片描述

环境配置

这里的环境配置主要配置的是npm安装的全局模块所在的路径,以及缓存cache的路径,之所以要配置,是因为以后在执行类似:npm install express -g (后面的可选参数-g,g代表global全局安装的意思)的安装语句时,会将安装的模块安装到【C:\Users\用户名\AppData\Roaming\npm】路径中,占C盘空间。
例如:我希望将全模块所在路径和缓存路径放在我node.js安装的文件夹中,则在我安装的文件夹【D:\Develop\nodejs】下创建两个文件夹【node_global】及【node_cache】如下图:
在这里插入图片描述
创建完两个空文件夹之后,打开cmd命令窗口,输入

npm config set prefix "D:\Develop\nodejs\node_global"
npm config set cache "D:\Develop\nodejs\node_cache"

接下来就是设置环境变量了 ,在““我的电脑”-右键-“属性”-“高级系统设置”-“高级”-“环境变量””
进入环境变量对话框,在【系统变量】下新建【NODE_PATH】,输入【D:\Develop\nodejs\node_global\node_modules】,将【用户变量】下的【Path】修改为【D:\Develop\nodejs\node_global】
在这里插入图片描述在这里插入图片描述在这里插入图片描述在这里插入图片描述
配置完后,安装个module测试下,我们就安装最常用的express模块,打开cmd窗口,
输入如下命令进行模块的全局安装:

npm install express -g     # -g是全局安装的意思

安装cnpm 下载国内资源

npm install -g cnpm --registry=https://registry.npm.taobao.org

至此node.js配置完成,此时就要搭建我们的vue项目了。

二、搭建vue项目环境

1.全局安装vue-cli

npm install --global vue-cli

先创建一个vue的demo的文件夹

cd vue_demo

创建一个基于 webpack 模板的新项目: 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 回车
进入项目:cd vue-demo,安装依赖

cnpm -i

安装成功后,项目文件夹中会多出一个目录: node_modules
在这里插入图片描述

npm run dev,启动项目

在这里插入图片描述
我们通过访问浏览器上的8080端口,就可以看到下面的页面了
在这里插入图片描述
以上vue的框架就搭建好了

HelloWorld

1.首先我们搭建好了自己的vue项目,我们让这个要让他跳转自我们的helloworld中去
1)首先,在我们大家好的环境的components下创建vue组件
在这里插入图片描述
在hellovue中添加如下代码

<template>
  <div id="vue">Hello Vue.js! {{ message }}</div>
</template>

<script type="text/javascript">
  export default { //这里需要将模块引出,可在其他地方使用
    name: "HelloVue",
    data (){ //注意:data即使不需要传数据,也必须return,否则会报错
      return {
        message: "hello vue"
      }
    }
  }
</script>

<style type="text/css">
  #vue{
    color: green;
    font-size: 28px;
  }
</style>

在项目生成的文件HelloWorld.vue 中添加一个链接

<h1>
 <router-link to="day01">跳转至HelloVue</router-link>
</h1>

接着我们去router的index.js中添加如下代码:
在这里插入图片描述
最后重启项目 刷新浏览器!
在这里插入图片描述
在这里插入图片描述
此时我们项目算可以正式运行!

看一下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进行一个初步的了解!!

代码交流 2020