vue项目安装

1、安装node.js,安装完node.js之后,npm也会自动安装

2、全局安装脚手架工具vue-cli,命令如下:        

  npm install --global vue-cli

3、vue项目初始化(已安装webpack)

sudo vue init webpack myProject

4、执行后续操作

Project name a
? Project description A Vue.js project
? Author ……
? Vue build standalone
? Install vue-router? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? Set up unit tests Yes
? Pick a test runner jest
? Setup e2e tests with Nightwatch? Yes
? Should we run `npm install` for you after the project has been created? (recom
mended) npm

   vue-cli · Generated "myProject".

5、运行vue项目

  cd myProject

  npm run dev

 

Vue Router 是 Vue.js 的官方导航库,用于创建单页应用(SPA)中页面之间的导航以及管理组件的状态。要在 Vue 项目安装并配置 Vue Router,你需要按照以下步骤操作: ### 安装 Vue Router 首先,确保您已经安装了 Node.js 和 npm (Node Package Manager)。然后,您可以使用以下命令来全局安装 Vue Router: ```bash npm install -g @vue/cli ``` 接着,在您的项目目录下初始化一个新的 Vue CLI 项目,并安装所需的依赖包: ```bash vue create my-project cd my-project vue add router ``` 在这个过程中,`vue add router` 会自动帮助您选择和配置必要的依赖,比如 `vue-router`, `vuex` 等。 ### 配置 Vue Router 在项目中找到 `router/index.js` 文件,这是 Vue Router 的入口文件。在这里,你可以配置路由规则和命名视图等。例如,添加一个基本的路由配置如下: ```javascript import { createRouter, createWebHistory } from 'vue-router'; const routes = [ { path: '/', component: () => import('./views/Home.vue'), name: 'home', }, { path: '/about', component: () => import('./views/About.vue'), name: 'about', }, ]; const router = createRouter({ history: createWebHistory(), routes, }); export default router; ``` 上面的代码定义了一个简单的路由配置,包含了两个基本的路由路径,分别对应到 `Home.vue` 和 `About.vue` 视图组件。 ### 使用路由 现在,您可以在 Vue 组件内的 `<router-link>` 标签上使用动态链接,或者在 `<router-view>` 中展示当前路由对应的组件内容: ```html <template> <div id="app"> <nav> <ul> <li><router-link to="/">Home</router-link></li> <li><router-link to="/about">About</router-link></li> </ul> </nav> <router-view></router-view> </div> </template> ``` 通过上述步骤,您就可以成功地将 Vue Router 添加到您的 Vue 项目中,并开始构建单页应用的导航功能。记得运行 `npm run serve` 或 `yarn serve` 来启动您的项目预览。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值