Vue脚手架搭建项目

这篇具有很好参考价值的文章主要介绍了Vue脚手架搭建项目。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

一、 安装Node.js

(一) 注意事项

1. 注意电脑系统版本以及位数,按照自己电脑的环境下载相应的Node.js安装包

2. 确定运行项目的Node.js版本和npm版本,避免后期因为版本不同而产生的一些差异问题

3. 在官网下载Node安装包时请下载稳定版(或不同版本的稳定版),正确区分稳定版(LTS)和最新版(Current)

(二) 下载安装

Vue脚手架搭建项目

双击安装包,一直点下一步,请自定义安装目录(推荐),然后一直点下一步,最后安装成功即可。

(三) 检测验证

在键盘按下【win+R】键,输入cmd,然后回车,打开命令行界面,进入命令提示符窗口,分别输入以下命令,显示版本号,则安装成功

node -v         显示安装的nodejs版本

npm -v         显示安装的npm版本

Vue脚手架搭建项目

 

(四) 更改全局下载路径

1、 一般情况下全模块所在路径和缓存路径放在node安装目录,所以在安装目录下新建【node_global】和【node_cache】文件

Vue脚手架搭建项目

 

2、 命令行设置路径

打开命令行界面,输入下面命令:

npm config set prefix " C:\Tools\web\Nodejs\node_global"

npm config set cache " C:\Tools\web\Nodejs\node_cache"

(五) 配置环境变量

1、 在【用户变量】Path下新增【C:\Tools\web\Nodejs\node_global】环境变量

Vue脚手架搭建项目

 

2、 在系统变量下新建【NODE_PATH】,变量值:【C:\Tools\web\Nodejs\node_global\node_modules】

Vue脚手架搭建项目

3、 在系统变量【Path】下新增【%NODE_PATH %】变量

  Vue脚手架搭建项目

 

4、 测试验证 

npm install express -g     # -g是全局安装的意思(会下载到C:\Tools\web\Nodejs\node_global\node_modules目录),不加 -g 就是默认下载到当前目录

Vue脚手架搭建项目

Vue脚手架搭建项目 

 

能正确下载到配置的目录表示node环境配置成功!

注意:

若执行命令npm install express -g 出现如下报错,是由于权限的原因,右击Nodejs文件夹->属性->安全,点击编辑,将所有权限都✔即可。

Vue脚手架搭建项目

Vue脚手架搭建项目 

 

(六) 全局安装cnpm

由于npm的服务器在海外,所以访问速度比较慢,访问不稳定 ,cnpm的服务器是由淘宝团队提供 服务器在国内cnpm是npm镜像,一般会同步更新,相差在10分钟,所以cnpm在安装一些软件时候会比较有优势。但是一般cnpm只用于安装时候,所以在项目创建与卸载等相关操作时候我们还是使用npm。

npm install -g cnpm --registry=https://registry.npm.taobao.org

执行成功后目录会出现cnpm文件

Vue脚手架搭建项目

Vue脚手架搭建项目 

 

如果出现“xxx不是内部命令”说明没找到命令

① 可以尝试关闭cmd窗口,然后重新打开cmd

② 环境变量配置不完整(重点)

二、 安装Vue脚手架

(一) 安装Vue-cli脚手架

命令行执行cnpm install --g vue-cli下载脚手架

Vue脚手架搭建项目

 

检测vue环境:vue -V

Vue脚手架搭建项目

 

(二) 创建项目

vue create  code    //其中code为你的项目目录名称 

  (enter键确认,并进入下一步)

然后选择第三个自定义项目环境Manually select features(手动选择项目特性)

Vue脚手架搭建项目

 

(三) 选择运行环境

(按键盘空格表示选中或者取消)

Vue脚手架搭建项目

 

• Babel 主要是对es6语法转换成兼容的js (选上)

• TypeScript 支持使用TypeScript语法来编写代码

• Progressive Web App (PWA) Support [把网页做的更像原生app]

• Router 支持vue路由配置插件(一般都会选择)

• Vuex 支持vue程序状态管理模式 (一般都会选择)

• CSS Pre-processors 支持css预处理器 (一般都会选择)

• Linter / Formatter 支持代码风格检查和格式化 (选上)

• Unit Testing 单元测试

• E2E Testing E2E测试

-----------------------------------------------------------------

选择vue版本

Vue脚手架搭建项目

Vue脚手架搭建项目 

 

这里的意思是问你本次项目是否采用history模式,如果选择Y,需要后台配置具体看vueRouter官网解释,这里我门选择 n用hash模式

-----------------------------------------------------------------

Vue脚手架搭建项目 

问你选择哪一种CSS预处理语言,我的项目中一般使用的是SCSS我选择第一个

-----------------------------------------------------------------

Vue脚手架搭建项目

 

选择一种格式化代码方式:我一般选择 ESLint + Prettier

-----------------------------------------------------------------

Vue脚手架搭建项目

 

意思是问你什么时候进行代码规则检测,我一般会选择保存就检测,也就是Lint on Save

-----------------------------------------------------------------

Vue脚手架搭建项目

意思是将Babel,PostCSS,ESLint这些配置文件放哪,通常我们会选择放到独立位置,让package.json文件干净点,所以选择第一个

-----------------------------------------------------------------

Vue脚手架搭建项目

这里是问你是否记录这次配置选择,选择之后会让你为这次配置起一个名字,这样下次可以直接快速配置选择,最后回车后就会初始化项目了

Vue脚手架搭建项目

根据指令提示 我们先执行cd code,然后执行npm run serve,就可以正常启动项目了

Vue脚手架搭建项目

 

三、 项目配置

(一) 项目结构

Vue脚手架搭建项目

 

api:数据请求接口目录,封装Http请求并挂在于vue原型链上

utils:工具事件目录,封装公共方法

Vue脚手架搭建项目

Vue脚手架搭建项目 

 

assets:静态资源文件,css、img等,这个文件内容不会被压缩

components:组件模板文件,用于存放公共组件

mixin:混入组件,相当于提出公共方法,在需要的地方可多次使用

router:路由组件,可做全局路由配置和拦截

store:临时存储,引入vuex-persist做持久化存储(相当于locastrong本地存储)

views:页面资源文件

(二) Scss预处理器

可以做公共css样式,公共变量,公共css方法

Vue脚手架搭建项目

在vue.config.js 配置公共scss资源加载方式(注意:公共scss文件并不能在<style>里面直接引用,也不能在main.js里面加载,mian.js只能加载css文件)

Vue脚手架搭建项目

(三) vuex持久化缓存

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 ,它采用集中式存储管理应用的所有组件状态,并以相应的规则保证状态以一种可预测的方式发生变化。

但是由于网页刷新,vuex管理器里面的数据就会丢失,造成问题,原本是想通过watch监听方式实时缓存vuex,并且已经实现。然后突然发现有成熟方式vuex-persist,支持常见的locastrong,seesionstrong,cookie等。

引入 import VuexPersistence from 'vuex-persist'

Vue脚手架搭建项目 

四、 Nodejs多个版本切换

(注意:如果要使用nvm,必须先卸载已经安装的nodejs)

(一) 下载nvm

下载地址:https://github.com/coreybutler/nvm-windows/releases

Vue脚手架搭建项目

 

(二) 安装nvm

在cmd命令行输入nvm,如果出现nvm版本号和一系列帮助指令,则说明nvm安装成功

Vue脚手架搭建项目

 

(三) 修改settings.txt配置

在你安装的目录下找到settings.txt文件,打开后加上 ,这一步主要是将npm镜像改为淘宝的镜像,可以提高下载速度。

node_mirror: https://npm.taobao.org/mirrors/node/ 

npm_mirror: https://npm.taobao.org/mirrors/npm/

(四) 获取可安装nodejs版本

可以先使用 nvm list 查看本地已安装的版本

nvm list available获取所有可以安装的 Node.js 版本

LTS 指最新稳定版本,CURRENT 指最新版本,一般安装 LTS

Vue脚手架搭建项目

 

(五) 安装指定版本Node.js

nvm install 10.11.0

Vue脚手架搭建项目

 

(六) 列出所有已安装版本

nvm list

Vue脚手架搭建项目

Vue脚手架搭建项目 

 

(七) 指定使用nodejs版本

只用指定使用的 Node.js 版本后,nodejs 的才真正安装了

nvm use 10.11.0(注意: 以管理员身份运行)

Vue脚手架搭建项目

 

(八) 卸载某个版本

nvm uninstall 10.11.0

Vue脚手架搭建项目

 

(九) nvm常用命令

nvm list 查看已经安装的版本

nvm list installed 查看已经安装的版本

nvm list available 查看网络可以安装的版本

nvm version 查看当前的版本

nvm install 安装最新版本nvm

nvm use <version> ## 切换使用指定的版本node

nvm ls 列出所有版本

nvm current显示当前版本

nvm alias <name> <version> ## 给不同的版本号添加别名

nvm unalias <name> ## 删除已定义的别名

nvm reinstall-packages <version> ## 在当前版本node环境下,重新全局安装指定版本号的npm包

nvm on 打开nodejs控制

nvm off 关闭nodejs控制

nvm proxy 查看设置与代理

nvm node_mirror [url] 设置或者查看setting.txt中的node_mirror,如果不设置的默认是 https://nodejs.org/dist/

nvm npm_mirror [url] 设置或者查看setting.txt中的npm_mirror,如果不设置的话默认的是: https://github.com/npm/npm/archive/.

nvm uninstall <version> 卸载制定的版本

nvm use [version] [arch] 切换制定的node版本和位数

nvm root [path] 设置和查看root路径文章来源地址https://www.toymoban.com/news/detail-491636.html

到了这里,关于Vue脚手架搭建项目的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue-cli5脚手架搭建项目过程详解 -vue组件单元测试

    单元测试是对软件中的最小可测试单元进行测试。(最小可测试单元是要有结果产出的。例如某个方法,单独的某个操作) 单元测试其实是伴随着敏捷开发,它是对更快开发的一种追求。早发现错误比晚发现错误会更好,保证自己的代码符合要求 一: 搭建基于 jest 的 vue 单元

    2023年04月14日
    浏览(111)
  • 安装Node(脚手架)

    从官网直接下载安装即可,自带npm包管理工具。https://nodejs.org/en 安装之后在终端里查看查看node版本 安装webpack 安装vue-cli3.x以上 注意 要先在盘服中创建好文件夹,然后访问 创建好之后创建工程名字然后选择最后一个,最后一个是自定义项目 我就不选择Y了,我选的是N 创建项

    2024年02月11日
    浏览(59)
  • Mac OS安装Vue CLI脚手架并创建一个基础项目教程

    前后端分离 可以大大地提高开发效率,主流的解决方案为 Vue.js+SpringBoot ,这里主要介绍 Vue在Mac端的入门教程 。软硬件环境为Macbook Air M2+macOS Vantura 13.4.1。 Vue (发音为 /vjuː/,类似 view) 是一款用于 构建用户界面 的 JavaScript 框架,是官方提供的 基于 Webpack 的 Vue 工具链 。它基

    2024年02月04日
    浏览(112)
  • 如何搭建vue脚手架

    使用 create-vue 脚手架创建项目 create-vue参考地址:GitHub - vuejs/create-vue: 🛠️ The recommended way to start a Vite-powered Vue project 步骤: 执行创建命令 2.选择项目依赖类容 安装:项目开发需要的一些插件 必装: Vue Language Features (Volar)  vue3语法支持 TypeScript Vue Plugin (Volar)  vue3中更好的

    2023年04月14日
    浏览(51)
  • 快速搭建Electron+Vite3+Vue3+TypeScript5脚手架 (无需梯子,快速安装Electron)

    Electron是一个使用 JavaScript、HTML 和 CSS 构建桌面应用程序的框架。 嵌入 Chromium 和 Node.js 到 二进制的 Electron 允许您保持一个 JavaScript 代码代码库并创建 在Windows上运行的跨平台应用 macOS和Linux——不需要本地开发经验(这段话是来自官网)。 根据vite官网文档 项目创建完成后进

    2024年02月02日
    浏览(103)
  • VUE2 脚手架搭建

    M : Model 模型层(业务逻辑层)主要包含 JS 代码,用于管理业务逻辑的实现 V : View 视图层 主要包含 HTML/CSS 代码,用于管理 UI 的展示 VM : ViewModel (视图模型层)用于将 data 与视图层的 Dom 进行动态绑定 ①脚手架环境安装 制作web项目,从小作坊状态转向工程化开发的状态

    2024年02月09日
    浏览(67)
  • vue脚手架创建项目

    npm install -g @vue/cli 如果报错可以尝试使用cnpm vue -V vue create 项目名称 输入y 上下选中选项 Manually select features (自由选择),回车 vue 版本的选择 其他按需要选择

    2024年02月05日
    浏览(68)
  • VUE——使用VUE脚手架创建项目

    前言 vue脚手架工具,对vue项目构造做了封装,直接使用vue-cli创建项目,常用配置自动帮你完成,不用自己像使用webpack一样配置。 目录 1、安装 npm i vue 2、创建vue项目 3、运行项目 ps:项目化开发中,使用import导入vue,而不用script src标签引入 我们的第一步需要下载vue及vue脚手

    2024年02月02日
    浏览(58)
  • Vue开发项目入门——Vue脚手架

            Vue脚手架是Vue官方提供的标准化开发工具(开发平台), 它 提供命令行和UI界面,方便创建vue工程、配置第三方依赖、编译vue工程。         特别注意:Vue脚手架是用来方便开发的,但vue脚手架不是最终发布到生产环境的产品。很多人会误认为生产环境也要安装

    2023年04月08日
    浏览(42)
  • 和chatgpt学架构01-搭建项目脚手架

    今年3月份以来,chatgpt就热度不减。有了这种聊天机器人,就可以很方便的帮助我们提高。无论是我们独立创业还是做项目外包,拥有一套自己可以把握的脚手架还是必备的能力。 过去如果靠自己摸索,组装这么一套脚手架还是费事费力的。一个是涉及技术比较多,既要架构

    2024年02月16日
    浏览(53)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包