前言

  在学习完vue基础语法之后,学着利用vue-cli脚手架搭建一个项目,本篇随笔主要记录搭建的过程,供大家一起学习。

具体内容

搭建vue项目的准备工作
1、安装Nodejs、NPM以及VSCode
Nodejs:是一个基于Chrome V8引擎的JavaScript运行环境,它结合NPM一起来管理包。
NPM:是和Nodejs一起安装的包管理工具,可以解决NodeJS代码部署上的诸多问题;常见的使用场景有以下几种:
(1)允许用户从NPM服务器下载别人编写的第三方包到本地使用;
(2)允许用户从NPM服务器下载并安装别人编写的命令程序到本地使用;
(3)允许用户将自己编写的包或命令程序上传到NPM服务器供别人使用;
PS1:Nodejs的安装与普通软件安装一样,但Nodejs安装成功后,就等于安装好了node和npm;可以使用“node -v”命令查看node版本,使用“npm -v”命令查看npm版本。
PS2:VSCode软件的安装与普通软件一样,该软件支持安装各种插件,在项目开发中,可以根据需要选择安装不同的插件。
2、全局安装webpack
命令:npm install webpack -g
PS:全局安装的包、模块默认保存在C盘用户目录文件夹下
    具体路径为:C:\Users\wangqin\AppData\Roaming\npm
3、全局安装vue
命令:npm install vue -g
【补充说明】以上都是使用npm来进行安装的,由于使用npm下载资源需要翻墙,导致下载速度极慢,所以可以使用cnpm来进行安装(命令:npm install cnpm -g --registry=https://registry.npm.taobao.org)
 =======================================================
Vue-cli脚手架搭建Vue项目
1、全局安装vue-cli
命令:cnpm install vue-cli -g
2、创建项目工程
在自己的项目目录下,运行如下命令来创建项目工程:
命令:vue init webpack + 项目名称
eg: vue init webpack netSystem  
PS:项目名称不能为中文名称;在创建项目工程时,命令提示符窗口会一步一步给出很多提示信息,根据自身项目开发需求,输入Y/N即可。以下列出了其中一些提示信息及其说明:
提示信息
说明
Project name
项目名称;默认是创建时输入的项目名称;当然还可以直接修改,回车即可
Project description
项目描述;同样可以输入项目描述内容
Author
项目创建者
Install vue-router?(Y/N)
是否需要vue-router,默认选择使用,因为这样生成好的项目就会有相关的路由配置文件
Use ESLint to lint your code?(Y/N)
是否使用ESLint,默认使用,这样生成的项目会生成相关的ESLint配置
......
......
在项目创建完成之后,会生成一个默认的项目目录,下面对项目目录中的主要文件及文件夹进行说明:
                              项目文件、文件夹说明                                                                     说明 备注
build文件夹 此文件夹主要是对webpack的配置
webpack.base.config.js 基本webpack配置
webpack.dev.config.js  开发环境配置
webpack.prod.config.js  生产环境配置
......
这些文件里已经完成一些简单配置,包括入口文件、插件、loader、热更新等;我们可以根据实际项目需求来进行相应的配置。
config文件夹
这个文件夹下包括3个文件,最主要的是index.js这个文件,它是进行配置代理服务器的文件
dev.env.js   开发环境
prod.env.js  生产环境
index.js
在index.js中配置代理服务器,这个和我们前端项目开发息息相关,和后端联调就需要在该文件夹中设置一个地址,这个地址是对应后端的地址;在“proxyTable”下的“target”属性里设置代理地址。此外,在使用webpack做构建工具的项目中使用proxyable代理解决跨域是一种比较方便的选择。
实现机制:
本地服务器->代理->目标服务器->获取到数据后通过代理伪装成本地服务器请求的返回值->浏览器获取到数据并进行渲染展示
src文件夹 此文件夹包含所有主要程序文件和文件夹,也是使用频率最高的一个文件夹
assets  此文件夹存放公用的样式、图片等
components  此文件夹存放所有的vue组件
router  此文件夹下的index.js是一个路由设置文件
App.vue 此文件是vue项目入口文件
main.js  此文件也是入口文件,对应webpack.base.config.js文件里的entry
static文件夹 此文件夹一般存放一些静态资源 该文件夹内存放的资源可以直接引入到项目中使用
package.json 此文件内保存着项目中所有依赖包及其包版本号信息;主要包括2部分内容
第一部分是scripts,可以在scripts里设置命令;例如设置了server用于调试,则我们启项目时输入的是npm run server;例如设置了build,则是输入
npm run build用于打包;
第二部分是dependencies和devDependencies,这里是项目中需要的依赖包,分别对应全局下载的依赖包和局部下载的依赖包
 
...... ...... ......
 3、验证项目是否可运行
在创建完成项目之后,需要验证项目是否可以运行起来
命令:cnpm run XXX   (eg:cnpm run dev /  cnpm run server)
PS:这里XXX根据package.json文件的配置而定

结束语

  学会搭建vue项目,并且了解使用vue搭建项目的目录文件,对后期项目开发起到足够大的帮助。

利用VUE-CLI脚手架搭建VUE项目的更多相关文章

  1. 使用Vue CLI脚手架搭建vue项目

    本次是使用@vue/cli 3.11.0版本搭建的vue项目 1. 首先确保自己的电脑上的Node.js的版本是8.9版本或者以上 2. 全局安装vue/cli npm install @vue/cl ...

  2. [转]Vue CLI 3搭建vue+vuex 最全分析

    原文地址:https://my.oschina.net/wangnian/blog/2051369 一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@ ...

  3. Vue CLI 3搭建vue+vuex 最全分析

    一.介绍 Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.有三个组件: CLI:@vue/cli 全局安装的 npm 包,提供了终端里的vue命令(如:vue create .vue ...

  4. 用 vue cli 脚手架搭建单页面 Vue 应用(进阶2)

    1.配置 Node 环境. 自行百度吧. 安装好了之后,打开 cmd .运行 node -v .显示版本号,就是安装成功了. 注:不要安装8.0.0以上的版本,和 vue-cli 不兼容. 我使用的 ...

  5. 13. Vue CLI脚手架

    一. Vue CLI 介绍 1. 什么是Vue CLI? Vue CLI 是一个基于 Vue.js 进行快速开发的完整系统.Vue CLI 致力于将 Vue 生态中的工具基础标准化.它确保了各种构建工 ...

  6. 让vue-cli脚手架搭建的项目可以处理vue文件中postcss语法

    图中&属于postcss的语法,这样书写样式可以清楚的看出选择器之前的层级关系,非常好用. 在利用vue-cli脚手架搭建的项目中如果不配置是不支持这种写法的,这样写不会报错,但是样式不生效. ...

  7. VUE CLI环境搭建文档

    VUE CLI环境搭建文档 1.安装Node.js 下载地址 https://nodejs.org/zh-cn/download/ 2.全局安装VUE CLI win+R键打开运行cmd窗口输入一下代 ...

  8. 手动搭建Vue之前奏:搭建webpack项目

    手动搭建vue项目 搭建vue前首先搭建webpack项目 首先你应当安装一下npm以及nodejs 安装完成后,进行如下操作: // 创建项目根目录 mkdir some_project_name ...

  9. Vue Cli 3:vue.config.js配置文件

    Vue Cli 3生成的项目结构,没有build.config目录,而是使用vue.config.js来进行配置. vue.config.js 是一个可选的配置文件,如果项目的 (和 package. ...

随机推荐

  1. 将rdlc报表作为资源嵌套使用

    原文:将rdlc报表作为资源嵌套使用 如果我们准备在Windows Forms里面使用rdlc报表,那么会遇到一个问题:rdlc报表到底要不要作为附属文件的方式随程序发布? 这样做的优点是:报表可以后 ...

  2. JSP版本的数据库操作

    代码时间:2015-6-16 <%@ page language="java" import="java.util.*" pageEncoding=&qu ...

  3. 每天一个Linux常用命令 ls命令

    ls:列出目录中的内容 -l  显示详细信息 -a 显示所有文件,包括隐藏文件 -i  显示inode -t :依时间排序,而不是用档名. -r :将排序结果反向输出,例如:原本档名由小到大,反向则为 ...

  4. 【扯淡篇】SDOI2018丶一轮游丶记

    --某不知名蒟蒻的SDOI2018 R1退役场游记&&OI生涯总结 真的是混不下去了. 进队是不可能的, 进队是不可能进队的. 这辈子不可能进队的. 刷题又不会刷 就是靠打表找规律这种 ...

  5. 【Luogu】【关卡2-3】排序(2017年10月) 【AK】

    任务说明:将杂乱无章的数据变得有规律.有各种各样的排序算法,看情况使用. 这里有空还是把各种排序算法总结下吧.qsort需要会写.. P1177 [模板]快速排序 这个题目懒得写了,直接sort了.. ...

  6. (PASS)break 和 continue 的区别

    1  break;  while循环中,break是用于永久终止循环.即不执行本次循环中break后面的语句,直接跳出循环. 终止,跳出,结束循环(可以作用在任何地方).也常与switch分支结构合用 ...

  7. bcpow — 任意精度数字的乘方

    bcpow — 任意精度数字的乘方 说明 string bcpow ( string $left_operand , string $right_operand [, int $scale ] ) 左 ...

  8. oscache缓存

    oscache 使用总结 Posted on 2009-05-22 22:45 青果 阅读(1270) 评论(2)  编辑  收藏 所属分类: 技术点滴  前阵子对公司网站进行了性能优化,其中,有一项 ...

  9. IDEA工具,配置相关笔记

    1.修改背景颜色(黑/白)File -> settings -> Editor -> Color Scheme -> General -> (Scheme选择Defaul ...

  10. 【在线工具】java开发常用在线工具

    转自:常用工具页面 Java源代码搜索 Grepcode是一个面向于Java开发人员的网站,在这里你可以通过Java的projects.classes等各种关键字在线查看它对应的源码,知道对应的pro ...