WEB后端第25天-Django项目第5天

WEB后端第25天-Django项目第5天

一、 vue.js的vue cli的应用

1.1 安装node.js

从node.js官方网站https://nodejs.org/en/download/下载 Installer 安装程序，下载完成后，双击之后，根据提示安装即可。

也可以下载.zip压缩目录，下载完成后，需要设置环境变量，将npm或cnpm命令所在的bin目录添加到path环境变量中。

安装完成后，需要配置global和cache缓存的目录（默认在{User_home}/AppData/Roaming/npm）下，可以执行以下命令：

npm config set prefix "E:\nodejs\node_global"
npm config set cache "E:\nodejs\node_cache"

E:\nodejs 是node.js工具的安装目录，node_global和node_cache需要手动创建的两个子目录。

另外，在环境变量中path中，增加node_global的全路径

E:\nodejs\node_global\node_modules

验证安装是否成功

node -v

npm -v

1.2 安装Vue ClI脚手架

文档： https://cli.vuejs.org/zh/

安装@vue/cli 的模块, 安装之后，vue的相关命令则可以使用。

npm install -g @vue/cli

创建vue项目

vue create project1

注意项目名称必须是小写字母。

创建项目过程中，按以下方式选择：

1. Manually select features (自定义)-> 回车之后下一步
2. 选择功能模块 (空格-选择/取消， 回车-确认选择)
 ◉ Babel
 ◉ Progressive Web App (PWA) Support
 ◉ Router
 ◉ Vuex
3. Use history mode for router? (Y/n) y
4. In package.json  配置文件 回车下一步
5. Save this as a preset for future projects?  (y/N) n

以上确认后，则会创建项目。等待1分钟左右，创建成功后，会高亮显示

 $ cd oneguoweb 
 $ npm run serve

进入项目目录中，运行 npm run serve则启动项目。项目启动成功后：

 DONE  Compiled successfully in 4418ms                                                                   11:52:41 AM


  App running at:
  - Local:   http://localhost:8080/ 
  - Network: http://10.36.174.56:8080/

  Note that the development build is not optimized.
  To create a production build, run npm run build.

DONE 表示完成。Local是本地访问地址, Network是远程访问地址。

二、Vue.js的模块化

在components下声明组件，如Swiper.vue

三、Node.js部署Vue.js项目

四、Nginx部署Django项目