HBuilderX项目转Vue Cli

coderzzc
2,350 阅读3分钟
1、安装vue-cli

npm install -g @vue/cli

2、新建通过vue-cli搭建的项目

选择默认工程
vue create -p dcloudio/uni-preset-vue vue-cli-project

3、将 HBuilderX 工程内的文件（除 unpackage、node_modules 目录）拷贝至 vue-cli 工程内 src 目录
4、安装sass和sass-loader以及其他依赖
npm install sass
npm install sass-loader
npm install
5、启动

npm run dev:h5

另外：vue-cli 工程转换为 HBuilderX 工程

不需要转换，把cli工程拖入HBuilderX中，可直接编辑、运行、发布。

遇到的问题

1、一开始项目里有less，所以又弄了一会less,但是后来找资料发现目前大部分都是使用scss，所以直接全局替换d掉less即可，免去下载less-loader的麻烦
2、包安装问题，sass和node版本不兼容
3、最终使用的版本(注意：安装sass需要python环境,如果没有可能会报python2.7异常什么的，这时你需要自行安装python，并添加到环境变量path中)

@vue/cli 5.0.8
node.js 16.17.0
"sass": "^1.62.0",
"sass-loader": "^13.2.2",

然后用到less的话需要安装,需要注意版本兼容问题
npm install less-loader@6.0.0 -D

项目启动报错：

## node-sass安装报错参考
WARNING
js文件没有找到，CommonJS 和 ES Module的导入导出混用导致的
export 'default' (imported as 'common') was not found in './static/js/common.js' (module has no exports)

Error
CommonJS 和 ES Module的导入导出混用导致的
# Error: ES Modules may not assign module.exports or exports.*, Use ESM export syntax, instead: xxx
解决方法：
1、放弃混用，使用其中一种导入导出
2、（本人使用无效，有懂的希望评论指教一下） babel.config.js添加sourceType: 'unambiguous'

module.exports = {
    presets: [ '@babel/preset-env' ], 
    sourceType: 'unambiguous' 
};
sourceType: 'unambiguous'

在使用 Babel 进行代码转换时，sourceType 配置项可以用来指定代码的模块类型，可以选择 'script' 或 'module'。如果代码中包含 import/export 语句，那么就可以将 sourceType 设置为 'module'，否则就设置为 'script'。但是，当我们在开发中使用的是混合了 CommonJS 和 ES6 模块的代码时，这个选择就有些困难了。

在这种情况下，Babel 的 sourceType: 'unambiguous' 配置项可以用来自动识别代码的模块类型。如果代码中包含 import/export 语句，则会被视为 ES6 模块，否则会被视为 CommonJS 模块。

sass和node-sass关系

Sass 是一种 CSS 预处理器，可以扩展 CSS 语言的功能，提高 CSS 代码的可维护性。而 node-sass 是一个在 Node.js 环境下编译 Sass 的 C++ 模块，可以让开发者在 Node.js 应用中使用 Sass 语法编写样式，同时也支持在 Gulp、Grunt 等构建工具中使用。

在使用 node-sass 模块时，我们需要同时安装 node-sass 和 Sass 语法解析器。而 sass 包则是 Sass 语法解析器，提供了解析 Sass 代码的功能。因此，如果我们想要在 Node.js 应用中使用 Sass 语法编写样式，需要同时安装 node-sass 和 sass 包。在安装 node-sass 时，npm 会自动将 sass 包作为其依赖项之一进行安装。

但是，如果你只是想单独使用 Sass 语法解析器来解析 Sass 代码，而不需要使用 node-sass 模块，那么你只需要单独安装 sass 包即可，不需要安装 node-sass。

需要注意的是，node-sass 的版本号中会包含对应的 sass 包版本号信息，因此在安装 node-sass 时，npm 会自动安装匹配的 sass 包。但是在单独安装 sass 包时，需要手动指定所需的版本号。另外，如果你想在构建工具中使用 Sass 语法解析器，也可以选择安装 node-sass 模块，这样可以避免手动指定 sass 包的版本号。

avatar
文章
阅读
粉丝