淘宝镜像初始化vue项目详细步骤详细代码步骤使用

安装淘宝镜像（强烈建议安装，不然真的很慢，最后会失败）

安装cnpm的原因：npm的服务器是国外的，所以有时候我们安装“模块”的时候会非常非常非常非常慢。

安装方法：

#-g 全局配置(有可能失败,假如失败后尝试下面代码就会成功)
npm install cnpm -g
#解决npm速度慢
npm install -g cnpm --registry=https://registry.npm.taobao.org

cnpm的作用：淘宝镜像将npm上的模块同步到国内服务器上，提高我们安装模块的时间。

安装淘宝镜像后，cnpm和npm命令行都可以使用，两者不存在冲突。

安装Cnpm后，可以使用cnpm -v 查看版本。

安装vue-cli脚手架

要全局安装，请输入命令行：

cnpm install vue-cli -g  

安装完成后，输入命令行 vue -V 查看版本号。 如果出现对应的版本号则说明成功。

查看哪些模板可用于创建 Vue 应用程序

vue list  

创建 vue-cli 项目：

接下来，初始化vue项目（任何文件位置都可以）

vue init webpack myvue(项目名)		#注：项目名不能大写，不能使用中文 

该命令的意思是根据初始化项目的该文件来生成您当前的文件目录。

初始化vue项目时，会出现几个提示，包括输入项目名称、描述、作者等，您可以根据实际情况进行选择。

？Project name ---- 项目名称，init命令时也填了个project-name，如果无需更改，直接回车即可；
？Project description ---- 项目描述，按需填写。无需填写可以直接回车；
？Author ---- 作者
？Vue build ---- 构建模式，一般默认第一个；我选no
？Install vue-router? ---- 是否安装vue-router。选no。
？Use ESLint to lint yout code? ---- 格式校验，按需；no
？Set up unit tests ---- 测试相关，按需；no
？Setup e2e tests with Nightwatch? ---- 测试相关，按需； no
？Should we run ‘npm install’ for you after the project has been created? ---- 按需，这里选yes, use NPM,我选No，之后自己在目标
目录下执行npm install即可。

进入你安装的项目

cd myvue

安装项目依赖（类似maven依赖）

npm install

当项目初始化时，.json 文件已经存在。 直接使用npm安装项目所需的依赖，否则项目将无法正常运行。

运行项目

npm run dev

浏览器访问：

http://localhost:8080/

注意：这里默认服务启动本地8080端口，所以请确保您的8080端口没有被其他程序占用。 当其他vue项目正在运行时，可以使用ctrl+c来中断运行。

项目搭建成功。创建vue-cli项目详细步骤 详细代码步骤

使用Idea打开项目：

总体框架

vue-cli的项目结构如下。 src文件夹需要掌握，因此本文也重点介绍其中的文件。 至于其他相关文件，了解一下就可以了。

文件结构分解

1.build——【配置】

构建文件主要是配置。 主要启动文件是dev-.js。 当我们输入npm run dev时，首先启动的是dev-.js。 它将检查节点和 npm 版本，加载配置文件并启动服务。

2.——【vue项目配置】

这些文件主要是项目相关的配置。 我们常用的是配置端口冲突时的监听端口、打包输出路径和命名等。

3.——【依赖包】

里面是项目的依赖包，里面包含了很多基本的依赖。 您还可以根据需要安装其他依赖项。 安装方法是打开cmd，进入项目目录，输入npm【依赖包名称】，回车。

在两种情况下我们将自己安装依赖项：

（1）项目运行时缺少依赖包：例如项目使用的加载外部css的css-、路由跳转vue-等（安装方法示例：npm css-）

（2）安装插件：如vux（基于WEUI的移动组件库）、vue-（轮播插件）

注意：有时会安装指定的依赖版本，需要在依赖包名称后面添加版本号信息。 例如安装11.1.4版本的vue-，输入npm vue-@11.1.4

4.src——[项目核心文件]

项目的核心文件之前已经简单说明过。 接下来，我们将重点关注main.js、App.vue和index.js。

4..html——[首页]

Index.html 与其他 HTML 一样，但一般只定义一个空的根节点。 main.js中定义的实例会挂载到根节点下，并通过vue组件填充内容。

4.2 App.vue——[根组件]

一个vue页面通常由三部分组成：()、js()、style(样式)

【】

模板只能包含1个父节点，也就是说只能有1个顶级div（比如上图中，父节点是#app的div，它没有兄弟节点）

是子路由视图，后续的路由页面都显示在这里。

打个比方，它类似于老虎机。 当跳转到某个路由时，该路由下的页面会被插入到这个槽中进行渲染和显示。

【】

Vue通常使用es6编写，使用，可以包含数据、生命周期（等）、方法（）等，具体语法请参见vue.js文档。 后面我也会举例说明。

【风格】

样式由样式标签包裹，默认影响整个世界。 如果需要定义一个仅在该组件下生效的作用域，则需要将其添加到标签中。

如果要引入外部css文件，首先需要为项目安装css-依赖包，打开cmd，进入项目目录，输入npm css-，回车。 安装完成后，可以在style标签下添加所需的css文件，例如：

<style> 
import './assets/css/public.css'  
style>  

这样我们就可以将style下的样式进行封装，写入到css文件夹中，然后引入到页面中使用。 整个vue页面也会看起来更加简洁。

4.3 main.js——[入口文件]

main.js主要介绍了vue框架、根组件和路由设置，并定义了vue实例，如下图

:{App} 是引入的根组件App.vue

插件也可以稍后引入。 当然，必须先安装插件。

4.4 ——【路由配置】

文件夹下有一个index.js，是路由配置文件。

这里定义了路径为“/”的路由。 该路由对应的页面是一个Hello组件，所以当我们访问浏览器url：8080/#/时，就会渲染出Hello组件。

同样，我们可以设置多个路由，比如'/index'、'/list'等。当然，我们要先引入组件，然后再为组件设置路由。