Can vue not have the .vue suffix? I want to introduce it into an old project. What should I do?
5
0
0
業(yè)精于勤，荒于嬉;行成于思，毀于隨。
Old projects directly import vue.js files
<script src="https://unpkg.com/vue/dist/vue.js"></script>
You can try html. But this does not conform to the syntax of vue, it will report an error
.vue format is not the file that is ultimately introduced into the page. After being packaged by webpack, a normal js file will be generated. Just introduce this js file.
Deploy the old project to v-cli, then reference the .vue component, and then package it with webpack
The first question is about the suffix.
The suffix has nothing to do with VUE. Vue is just a special text file, even if you use .abc.
This is all thanks to webpack. In the loaders configuration of webpack, you can give one or more loaders to the specified file. You can also think of these loaders as precompilation tools.
module: {
rules: [{
test: /\.vue$/, // 這里指定 .vue 文件通過 vue-loader 解析，你可以指定任何類型的文件。
loader: 'vue-loader',
options: vueLoaderConfig
}]
}Second question, vue small project is similar to the usage of third-party libraries
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>vue-demo</title>
<script src="https://unpkg.com/vue/dist/vue.js"></script>
</head>
<body>
<p id="app">
{{ message }}
</p>
</body>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Hello Vue!'
}
})
</script>
</html>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
