Vue-CLI 项目搭建.doc

Vue-CLI 项目搭建指南 Vue-CLI 是一个全局安装的 npm 包，提供了终端里的 vue 命令，能够快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。下面是 Vue-CLI 项目搭建的详细指南： 一、安装 Vue-CLI 需要安装 Vue-CLI，使用以下命令： `npm install -g @vue/cli` 如果安装速度太慢，可以切换源： `npm install -g cnpm --registry=https://registry.npm.taobao.org` 然后，使用 cnpm 替换掉 npm： `cnpm install -g @vue/cli` 二、创建项目 有两种方式创建项目： 方式一：命令行创建 使用以下命令创建一个新项目： `vue create item` 选择 Manually，手动选择功能，然后回车。选择 Babel、Router、Vuex 等功能。 方式二：使用图形化界面 使用以下命令以图形化界面创建和管理项目： `vue ui` 三、项目目录结构 以下是 Vue 项目的目录结构： -myfirstvue (项目名字) -node_modules (放着当前项目所有的依赖，可以删除，删除项目运行不了了，使用 npm install 把该项目的依赖再装上) -public (文件夹) -favicon.icon (小图标) -index.html (单页面开发，整个项目就这一个页面，以后不要动) -src (以后咱们都是在这里面写东西) -assets (放静态资源，图片，js，css) -components (组件，xx.vue 组件，小组件，给页面组件用) 四、运行项目 有两种方式运行项目： 方式一：在项目路径下输入 npm run serve 方式二：使用 PyCharm 运行 五、集成 Bootstrap、jQuery、ElementUI 可以下载 Bootstrap 和 jQuery，配置 Bootstrap 和 jQuery，使用 Axios 与后端交互。 六、es6 语法之导入导出 es6 语法中可以使用 import 和 export 语句来导入和导出模块。 七、定义并使用组件 使用 Vue 组件可以定义并使用组件。 八、小结 Vue-CLI 提供了一个快速搭建项目的方式，使用 Vue-CLI 可以快速搭建一个新项目，或者直接通过 vue serve 构建新想法的原型。