vue搭建项目入门教程-hello world

2020-09-10 10:42:22 | 编辑

在windows搭建vue脚手架开发环境,并编写hello world入门教程。

1.下载安装nodejs

Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。

下载地址:https://nodejs.org/zh-cn/download/

安装完成后查看版本

C:\Users\Administrator>node -v
v12.18.3

C:\Users\Administrator>npm -v
6.14.6

C:\Users\Administrator>

设置npm使用国内淘宝镜像

临时使用:

npm --registry https://registry.npm.taobao.org install express

持久使用:

npm config set registry https://registry.npm.taobao.org

2.搭建vue项目环境

2.1全局安装vue-cli(vue-cli 是一个官方发布 vue.js 项目脚手架,使用 vue-cli 可以快速创建 vue 项目)

npm install --global vue-cli

2.2创建vue项目

进入你的项目目录,创建一个基于 webpack 模板的新项目: vue init webpack 项目名

D:\vuedemo>vue init webpack vuedemo
D:\vuedemo>vue init webpack vuedemo

? Project name vuedemo(回车-默认项目名)
? Project description A Vue.js project(回车-默认项目描述)
? Author itxw <itxw@qq.com>(回车-作者用户)
? Vue build standalone(上下选择运行和编译)
? Install vue-router? Yes(yes 安装路由)
? Use ESLint to lint your code? No(no 不使用代码检查)
? Set up unit tests No( no 不使用单元测试)
? Setup e2e tests with Nightwatch? No(不使用自动测试)
? Should we run `npm install` for you after the project has been created? (recommended) no(自己选择)

   vue-cli · Generated "vuedemo".

# Project initialization finished!
# ========================

To get started:

  cd vuedemo
  npm install (or if using yarn: yarn)
  npm run dev

Documentation can be found at https://vuejs-templates.github.io/webpack

2.3给项目创建依赖

npm -i(i是install)

cd vuedemo
npm -i

安装成功后,项目文件夹中会多出一个目录: node_modules,到此,一个完整得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配置等

2.4.启动vue项目

npm run dev

 DONE  Compiled successfully in 2097ms                                                                10:33:43 ├F10: AM┤

 I  Your application is running here: http://localhost:8080

访问vue界面:http://localhost:8080

3.开发vue代码

3.1开发vue组件

 

 

 

 

 

登录后即可回复 登录 | 注册
    
关注编程学问公众号