node.js Vue安装、Vue的项目结构、Vue语法

Java、

已于 2023-05-22 20:03:10 修改

阅读量334

点赞数

文章标签： vue.js node.js javascript

于 2020-03-27 15:43:38 首次发布

本文链接：https://blog.csdn.net/weixin_44675513/article/details/105122356

版权

本文详细介绍了如何安装node.js与Vue.js，包括两种安装方式，并讲解了Vue项目的常见结构。此外，还深入解析了Vue语法，如事件绑定、键盘事件、v-model、v-for指令以及生命周期等关键概念。

摘要由CSDN通过智能技术生成

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

最低0.47元/天解锁文章

Java、

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
node.js Vue安装、Vue的项目结构、Vue语法

文章目录main.js(入口)routes.jsapp.jsmain.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 fro...
复制链接

扫一扫