Vue 入门之搭建vue脚手架

系列文章目录

第一章 Vue 入门之搭建vue脚手架
第二章 Vue入门之项目结构介绍
第三章 Vue入门之基本语法
第四章 Vue入门之企业站点开发实践
第五章 Vue入门之前端部署

---

---

前言

vue现在是比较流行的前端框架，花一些时间学习下，特将学习过程分享出来，供大家一起学习。

---

一、Vue介绍

官网：https://vuejs.org/

Vue（读作 /vjuː/，类似view）是一个用于构建用户界面的 JavaScript 框架。它建立在标准 HTML、CSS 和 JavaScript 之上，并提供了一个声明性和基于组件的编程模型，可帮助您有效地开发简单或复杂的用户界面。

二、使用步骤

1.准备环境

我本地mac环境，采用homebrew傻瓜式安装（示例）：

• 安装node

(base) valley@valleyMacBook-Pro ～ % brew install node
(base) valley@valleyMacBook-Pro ～ % node -v
v17.5.0
(base) valley@valleyMacBook-Pro ～ % npm -v
8.4.1

• 安装cnpm

(base) valley@valleyMacBook-Pro ～ % npm install -g cnpm --registry=http://registry.npm.taobao.org

• 安装vue-cli 脚手架构建工具

(base) valley@valleyMacBook-Pro ～ % npm install -g @vue/cli
(base) valley@valleyMacBook-Pro ～ % vue -V
2.9.6

2.创建工程目录

创建一个文件夹，为我们的项目工程目录。

(base) valley@valleyMacBook-Pro ～ % mkdir gitee
(base) valley@valleyMacBook-Pro gitee % cd gitee

3.创建项目

创建项目，名字叫companywebsite。

(base) valley@valleyMacBook-Pro gitee % vue create companywebsite
?  Your connection to the default npm registry seems to be slow.
   Use https://registry.npmmirror.com for faster installation? Yes


Vue CLI v5.0.4
? Please pick a preset: Default ([Vue 2] babel, eslint)


Vue CLI v5.0.4
✨  Creating project in /Users/valley/gitee/companywebsite.
🗃  Initializing git repository...
⚙️  Installing CLI plugins. This might take a while...


added 843 packages in 26s
🚀  Invoking generators...
📦  Installing additional dependencies...


added 83 packages in 14s
⚓  Running completion hooks...

📄  Generating README.md...

🎉  Successfully created project companywebsite.
👉  Get started with the following commands:

 $ cd companywebsite
 $ npm run serve

注意：也可以执行命令vue init webpack myProject，需要安装webpack。

4.启动项目

输入cd 项目名，按回车键进入你创建的项目中，再接着输入npm run serve运行项目

cd companywebsite
(base) valley@valleyMacBook-Pro gitee % cd companywebsite 
(base) valley@valleyMacBook-Pro companywebsite % npm run serve

> companywebsite@0.1.0 serve
> vue-cli-service serve

 INFO  Starting development server...


 DONE  Compiled successfully in 3808ms                                                       下午4:10:35


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://192.168.111.30:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

5.浏览器访问

浏览器访问如下：

---