vue初始安装及项目初启动

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：

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