vue之项目创建,脚手架搭建。(一)

一、 创建准备

巧妇难为无米之炊,首先需要下载项目创建的工具,前端开发必需的两个工具。

1.node

  • node.js 官网地址
    由于Node.js平台是在后端运行JavaScript代码,所以,必须首先在本机安装Node环境。最大的优势是借助JavaScript天生的事件驱动机制加V8高性能引擎,使编写高性能Web服务轻而易举。
    安装时勾选全部组件。

shift+右键,在此处打开命令窗口
输入node -v 查看版本号

2. npm

  • npm 官网地址
    npm是包管理工具,类似于一个应用商城,项目开发所用的模块在这里集中管理,使用方便。一般安装node.js时已经自动安装。

shift+右键,在此处打开命令窗口
输入npm -v 查看版本号

要确保这两个工具正常运行。

3.淘宝镜像

  • 淘宝镜像 官网地址
    npm是外网工具,因此对于很多不能翻墙的用户来说,下载依赖可能会比较慢,淘宝镜像是国内公司复刻npm的镜像,方便用户快速下载依赖。

打开命令窗口安装:
npm install -g cnpm --registry=https://registry.npm.taobao.org

二、创建项目

万事具备,只欠东风。

1.创建指令

  • vue.js 官网地址
    vue官网有非常详细的使用教程!
    打开命令窗口,依次输入。

cnpm i vue-cli -g 、、、 官方脚手架 ,稍等安装完毕再执行下面。
vue init webpack mypro 、、、mypro是创建的项目名称。

项目创建选项中 ESLint 是严格模式,代码规范比较严厉,新手不适应。
vue创建项目选项

cnpm i 、、、安装项目的所有依赖
cnpm run dev 、、、启动项目。
在浏览器中输入:http://localhost:8080/
就可以看到你的项目了

在这里插入图片描述

2.项目目录

build:打包压缩文件,项目上传用。(一般不用)
config:配置文件。(一般不用)
node_modules:项目依赖文件。(不用)
src:项目开发主要文件。(最重要,里面文件项目开发时说。)
test:测试用的文件。(一般不用)
vue项目目录

基本上创建一个项目流程就这样,不明白的可以问(针对新手,大佬自动飘过,哈哈)

原创文章 38 获赞 35 访问量 4万+

猜你喜欢

转载自blog.csdn.net/qq_42690547/article/details/88737354