HbuilderX利用Node.js构建vue项目
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.js中 components改为component
12.注
我是菜鸟,有错请温柔指出(๑><๑)