ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

vue项目化/模块化的开发方式与环境搭建(超基础且详细)

2022-01-24 22:34:18  阅读:126  来源: 互联网

标签:npm vue cnpm 模块化 文件夹 开发方式 install 输入


使用@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. 运行成功后点击链接跳转,或者复制链接到浏览器打开。

标签:npm,vue,cnpm,模块化,文件夹,开发方式,install,输入
来源: https://blog.csdn.net/llssdshiyi/article/details/122674964

本站声明: 1. iCode9 技术分享网(下文简称本站)提供的所有内容,仅供技术学习、探讨和分享;
2. 关于本站的所有留言、评论、转载及引用,纯属内容发起人的个人观点,与本站观点和立场无关;
3. 关于本站的所有言论和文字,纯属内容发起人的个人观点,与本站观点和立场无关;
4. 本站文章均是网友提供,不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属;如您发现该文章侵犯了您的权益,可联系我们第一时间进行删除;
5. 本站为非盈利性的个人网站,所有内容不会用来进行牟利,也不会利用任何形式的广告来间接获益,纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

专注分享技术,共同学习,共同进步。侵权联系[81616952@qq.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有