本文主要是介绍vue项目化/模块化的开发方式与环境搭建（超基础且详细），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

使用@vue/cli创建项目结构

1.下载安装node.js，当前最新版V16，npm将自动安装好

目的：使用npm工具

Node.js中文下载链接

2.安装cnpm（需联网）

• 打开终端：在电脑左下搜索框-> 输入：cmd  ->确定
• 输入：npm install -g cnpm --registry=https://registry.npm.taobao.org ，进行下载安装
• 修改配置：npm config set registry https://registry.npm.taobao.org

3.安装vue命令行工具

输入：cnpm install -g @vue/cli（下载最新版）

输入：cnpm install -g @vue/cli@版本号（下载指定版本）

查看当前脚手架版本号----输入：vue -V（中间有空格）

4.手动在d盘建立一个新文件夹（装项目文件）：

例：d:/myVue

5.创建项目

输入 ：d: ->回车,将当前路径切换到d盘（不要忽略冒号“:”）

输入： cd myVue ->回车 ，进入myVue目录

输入：vue create demo，创建一个名为demo的项目

 6.进行项目结构设置

通过上下键和空白键进行选择，按回车确认选择。

先选中Manually select features然后回车，第二个先用空格键选中项！！再按回车键确认，带*号的都是要选中的

 然后照着图里选择就好

 最后一列问是否将此保存为未来项目的预设，可以y也可以n

 为预设起个名字

 以上全部设置完myVue文件夹下就出现了一个新的vue项目，其中node_modules是存放模块的文件夹，一般上传和打包时都会删除这个文件夹，因为实在是太大了，会导致打包和解压速度很慢。

下面会讲删除后怎么下回来。

 PS：CMD反复安装不了Vue的解决方法

7.使用vscode打开文件夹d:/myVue/demo项目进行编辑

项目结构：

运行方式：

1. 打开终端：点击上方终端 ->新建终端
2. 如果项目中没有node_modules文件夹，则输入npm install或cnpm install下载。
3. 运行：输入npm run serve
4. 运行成功后点击链接跳转，或者复制链接到浏览器打开。

这篇关于vue项目化/模块化的开发方式与环境搭建（超基础且详细）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！