文章目录
node.js Vue安装
首先下载node.js要求版本在8.9以上 官网:https://nodejs.org/zh-cn/
下载完可检查在windows任务命令行里输入 node -v
第一种:
安装
npm install -g @vue/cli
更新
npm update -g @vue/cli
创建一个vue项目
vue create hello-world
ps:hello-world 为项目名称
第二种(待测试):
安装
yarn global add @vue/cli
更新
yarn global upgrade --latest @vue/cli
使用淘宝NPM镜像源下载比较快 命令:npm install -g cnpm --registry=https://registry.npm.taobao.org
安装vue-cli(全局安装vue-cli) 命令:cnpm install -g vue@next
vue/cli安装
命令:cnpm install -g @vue/cli
检查环境是否安装上:vue -V
创建vue项目:
在命令行里输入命令:vue init webpack vue_demo(创建名字为‘vue_demo’的文件夹)
然后进入此文件夹:cd vue_demo
然后手动下载:cnpm install
最后运行程序:npm run dev
运行之后会导出网址:http://localhost:8080
在网页上输入上面的网址即可
Vue项目结构
main.js(入口)
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import App from './App'
// 引入路由
import VueRouter from 'vue-router'
// 引入路由的配置文件
import Routes from './routes'
Vue.config.productionTip = false
// 使用声明
Vue.use(VueRouter)
// 创建路由
const router = new VueRouter({
routes: Routes,
// 消除地址栏中的"#"
mode: 'history'
})
/* eslint-disable no-new */
new Vue({
el: '#app',
// router,
components: { App },
template: '<App/>',
router: router
})
routes.js
// 引入各个组件
import homeData from './home/homeData.vue'
import Page2 from './charging/chargingMonitoring.vue'
import Page3 from './alarm/alarmManagement.vue'
import Page4 from './pay/pay.vue'
// 设置路径
export default[
// eslint-disable-next-line no-undef
{path: '/1', component: homeData},
{path: '/2', component: Page2},
{path: '/3', component: Page3},
{path: '/4', component: Page4}
]
app.vue
<script>
import Header from './components/Header'
import homeData from './home/homeData'
import Page2 from './charging/chargingMonitoring'
import Page3 from './alarm/alarmManagement'
import Page4 from './pay/pay'
export default{
name: 'App',
components: {
'pageheader': Header,
// eslint-disable-next-line no-undef
'homeData': homeData,
'page2': Page2,
'page3': Page3,
'page4': Page4
}
}
</script>
Vue语法
快速入门
<body>
<div id="app">
{
{message}}<!--Vue的插值表达式,把data中定义的数据显示到此处-->
<!-- 三元运算符 -->
{
{ false ? "OK" : "No" }}
<!-- 数学运算-->
{
{number*3.14}}
<!--插值表达式不支持
{
{var a = 1;}}
{
{if(a = 10){}}}
-->
</div>
</body>
<script>
//view model
//创建Vue对象
new Vue({
el:"#app",//由vue接管id为app区域
data:{
message:"Hell