欢迎光临散文网 会员登陆 & 注册

HbuilderX利用Node.js构建vue项目

2020-12-20 18:01 作者:寂风也过路  | 我要投稿

0.首先要配置Node.js环境

太多可参考的了,这里就不详写了。

1.1

菜鸟教程:https://www.runoob.com/nodejs/nodejs-npm.html

1.2

Node.js - npm 与cnpm配置(Windows10):https://www.jianshu.com/p/2fda768e0448

1.3

npm和cnpm(windows)安装步骤:https://blog.csdn.net/wjnf012/article/details/80422313

1.4

cnpm卸载命令:npm uninstall cnpm -g

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

1.5

window下node进入编辑模式后输入require('express')后,提示Error: Cannot find module "***"的解决办法:

环境变量NODE_PATH,其值设置为:

(安装的node.js文件夹路径)\node_global\node_modules

1.6

cnpm会被安装到

(安装的node.js文件夹路径)\node_global\node_modules

下,而系统变量path并未包含该路径。在系统变量path下添加路径

(安装的node.js文件夹路径)\node_global

即可正常使用cnpm(如命令行输入:cnpm -v验证)

1.7

npm执行过程中,使用crtl+c将提示批处理操作是否终止(Y/N)

1.8

npm添加代理和取消代理(主要是淘宝镜像):https://www.cnblogs.com/tonyzt/p/11635421.html

1.新建项目

这么创建!

2.工具->内置终端->插件安装->安装内置终端

可能安装完需要重启hbuilderX? 不重启的话,这个内置终端用起来会有点问题。

(不过,也可能只是个例现象?)(T ^ T)

3.选中项目 Alt+C 打开内置终端

输入以下内容安装依赖包:(这些以后大概率都会用上)淡━━(‾ー‾*|||━━定

npm install axios -save-dev          // 处理http应用请求的包

npm install --save vue-router   // Vue官方的路由管理器

npm i element-ui -S // elementUI,一个不错的UI组件库

npm install babel-plugin-component -D // 按需导入elementUI组件用

4.package.json 指南

http://nodejs.cn/learn/the-package-json-guide

(可以参考看看)∑(〟〇О〇)真…真的吗!?

5.工具->设置->运行配置

1.node运行配置

两个路径可不配置

要配置的话:

(1)选择内置终端

(2)npm 路径查询 npm config get prefix(cmd 运行)

(3)node 路径查询 where node (cmd 运行)

注:up主配置后会导致这里的npm run serve不能用(尚不知啥原因)o(╥﹏╥)o

快捷的执行命令方式

2.浏览器配置:(看个人用哪个了)

示例

6. 选中项目->Alt+C 

现在要运行项目爽一下了(ಡωಡ)hiahiahia ,对,已经可以用了,都是一些默认的内容

输入:npm run serve

记得复制内置终端里显示的  http://localhost:8080/ 到浏览器网址处打开,不然是不是觉得好像无事发生?_(•̀ω•́ 」∠)_

7.main.js中:

Vue.config.productionTip = false

阻止启动生产消息,常用作指令

没有Vue.config.productionTip = false这句代码,它会显示你生产模式的消息

开发环境下,Vue 会提供很多警告来帮你对付常见的错误与陷阱。

而在生产环境下,这些警告语句却没有用,反而会增加应用的体积。

此外,有些警告检查还有一些小的运行时开销,这在生产环境模式下是可以避免的。

(摘于官网说明)

大概意思应该就是,消息提示的环境配置,设置为开发环境或者生产环境

8.各种文件

favicon.ico一般用于作为缩略的网站标志,它显示位于浏览器的地址栏或者在标签上,用于显示网站的logo, 如图 红圈 的位置, 目前主要的浏览器都支持favicon.ico图标. 

main.js 入口js文件(里面将创建APP.vue根组件)

APP.vue 根组件

index.html 主页

node_mudules npm下载的依赖

src 项目源码目录(基本都是在这里面写代码)

assets 静态资源目录

components 公共组件目录

9.让vue项目启动时自动启动浏览器,注意得先配置好运行配置里的浏览器路径,然后

找不同

10.Vue路由

Vue路由(vue-router)详细讲解指南:

https://www.cnblogs.com/dengyao-blogs/p/11562257.html

示例

11.vue初始化报错,Cannot read property '$createElement' of undefined

解决方法:router/index.jscomponents改为component

12.注

我是菜鸟,有错请温柔指出(๑>؂<๑)

HbuilderX利用Node.js构建vue项目的评论 (共 条)

分享到微博请遵守国家法律