单文件组件的环境准备
-
安装nodeJs，如下图所示表示已安装完成
Node.js (nodejs.org)
image.png -
安装cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
image.png
image.png 修改包的默认安装路径
默认路径一般都在C:\Users\xxx\AppData\Roaming\npm下面，但是C盘的空间比较宝贵，我想把安装包下载到D盘里，设置方法如下：
先在想要放置的目录下分别创建这两个目录npm_cache和npm_grobal
npm config set cache "D:\nodePack\npm_cache"
npm config set prefix "D:\nodePack\npm_grobal"
查询是否设置成功
npm config get prefix
npm config get cache
image.png
-
安装vue-li
cnpm install -g @vue/cli
image.png
image.png -
安装webpack，js的打包器
cnpm install -g webpack
image.png
image.png -
启动vue-li的图形化界面管理器
vue ui
image.png
image.png -
创建项目
image.png
image.png
image.png
image.png
项目路径
image.png
将项目拖拽到HBuilder
image.png
image.png
image.png
浏览器打开网页http://localhost:8080/
image.png 创建vue
在components目录下创建test.vue文件-
编写test.vue
image.png
<template>
<h2 class="red">test...{{msg}}</h2>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: {
type: String,
default: "test msg"
}
}
}
</script>
<style>
.red{color: crimson;}
</style>
-
修改HelloWorld.vue
image.png
<template>
<div class="hello">
<h1>{{ msg }}</h1>
</div>
</template>
<script>
export default {
name: 'HelloWorld',
props: {
msg: String
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
</style>
-
修改App.vue
image.png
<template>
<div id="app">
<img alt="Vue logo" src="./assets/logo.png">
<HelloWorld msg="Welcome to Your Vue.js App"/>
<test></test>
</div>
</template>
<script>
import HelloWorld from './components/HelloWorld.vue'
import test from './components/test.vue'
export default {
name: 'App',
components: {
HelloWorld,
test
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
image.png
- uni-app
uni-app官网 (dcloud.io)
