我正在Ubuntu 20.04下设置我的开发环境，使用以下工具:
- PhpStorm 2020.3 as IDE
- CodeIgniter v4 Vue 3. x
- 顺风CSS + UI
我创建了一个测试项目，并按照我所做的文档:
npm install tailwindcss@latest
npm install @headlessui/vue @heroicons/vue
npm install vue@next
和其他东西来创建CodeIgniter项目的框架。然后我写了一个简单的"Hello world"Vue应用:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link href="output.css" type="text/css" rel="stylesheet" />
<script src="https://unpkg.com/vue@next"></script>
<script type="module" src="test1.js"></script>
</head>
<body>
<div id="hello-vue" class="demo">
{{ message }}
</div>
</body>
</html>
JS
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
它工作!但据我所知，这是没有意义的:我使用Vue.js从CDN，而我安装它在本地使用npm。
如果我删除<script src="https://unpkg.com/vue@next"></script>行，我需要导入Vue才能使用它。
包含在node_modules文件夹下。所以我试了:
import Vue from "/node_modules/vue/dist/vue.cjs.js"
也:
import Vue from "../node_modules/vue/dist/vue.cjs.js"
但是在这两种情况下，它都找不到文件(错误404)。正确的语法是什么?
当然这个文件存在，如果我在项目的根文件夹中输入这个:
$ ls node_modules/vue/dist/vue.cjs.js
node_modules/vue/dist/vue.cjs.js
您正在混合客户端javascript和服务器端javascript。
node_modules目录位于您的服务器中，因此对客户端不可用，客户端是请求您初始html的客户端。当你做
<script src="https://unpkg.com/vue@next"></script>
<script type="module" src="test1.js"></script>
你正在使Vue访问到你的客户端js，因为它是从https://unpkg.com/vue@next导入的。如果你想避免这种情况并使用你的npm包，你需要使用像webpack这样的打包器。它会查看你在js文件中导入的模块，并准备一个新的js文件，其中包含所有需要的东西(包括你的代码和vue模块代码)。
如果你设置一切正确，你应该能够最终编写一个js文件:
import Vue from "vue"
const HelloVueApp = {
data() {
return {
message: 'Hello Vue!!'
}
}
}
Vue.createApp(HelloVueApp).mount('#hello-vue')
而不需要
<script src="https://unpkg.com/vue@next"></script>
。