1、Vue安装

1、vue可以通过npm下载生成项目,此处所以首先安装的是nodejs,这里的关系就是npm是nodejs里面的一个小弟,所以此处依赖nodejs

npm init -y

可以先在对应的项目路径下进行初始化操作:

npm install vue

如果碰上

npm notice created a lockfile as package-lock.json.

则在对应的package-lock.json路径下,加上:

"private":true,

则在

这个是在所选对应路径下安装

npm install vue-cli --vue脚手架

建议脚手架用

npm install -g @vue/cli --vue脚手架

npm install --global webpack --打包

如果之前没有使用npm install -g @vue/cli --vue全局进行安装,则需要在对应安装的cli路径bin下找到vue-cli,在里面执行cmd命令,如果已经是全局的vue-cli,则直接在目标文件夹内进行vue的项目初始化即可

新建项目

vue init webpack a-project

运行项目过程参数解析:

Project name:项目名称 ,默认为初始化建项目的名称a-project,不需要直接回车
Project description:项目描述,默认为A Vue.js project,不需要直接回车
Author:作者,如果有配置git的作者,自动会读取。直接回车
Install vue-router? 是否安装vue的路由插件,需要安装,选择Y
Use ESLint to lint your code? 是否用ESLint来限制你的代码错误和风格。不需要输入n,需要选择y,如果是大型团队开发,最好是进行配置
setup unit tests with Karma + Mocha? 是否需要安装单元测试工具,不需要输入n,需要选择y
Setup e2e tests with Nightwatch? 是否安装e2e来进行用户行为模拟测试,不需要输入n,需要选择y

运行项目

npm run dev

运行执行的是dev里面的配置进行构建运行,此处会在占用一个本地端口,直接访问这个url即可进入vue:

之后对vue项目的任何操作,直接保存,就会在这个url下直接体现,并可进行调试

修改vue启动端口端口号:

2、vue路由配置

再讲路由之前,可以先说下vue的引包,vue引入包后,要进行应用声明

此处是在route下面创建一个Js文件

这里面就是要引入的实际页面的路径,也就是此处路由的概念是页面之前的跳转及调用 

 

引用路由链接在对应的主App.vue下进行,以此为例

这段就是引用刚才路由里面那段配置,当然同时要存在index.vue这个文件页面。

<router-link to="/index">首页</router-link>

package.json里面的serve中的对应的serve就是npm启动的那个路径  npm run serve:

项目配置完成后,可以正常启动 

Logo

前往低代码交流专区

更多推荐